/*
 * MCP and the Road Not Taken — Design Language Tokens
 * 
 * A single source of truth for the essay website and all GTM assets.
 * Both the long-form article and the carousel slides import this file.
 * 
 * Design rationale:
 * - Dark (#0B0F19) backgrounds for code and callouts, not the whole page.
 *   This is a technical essay with architectural arguments, not a developer
 *   docs site. The reading surface stays light.
 * - Warm paper (#FAFAF7) for body text. Pure white (#FFF) is too harsh for
 *   20K words. The slight warmth reduces eye strain on long reads.
 * - Accent (#2563EB) is a saturated blue with enough contrast for inline
 *   links on the paper background, and enough brightness for heading
 *   emphasis on dark surfaces.
 * - Section markers use a muted stone (#78716C) to create visual territory
 *   without competing with content. The section number is the landmark;
 *   the color says "this is structure, not argument."
 * - Code blocks use a near-black (#0B0F19) that reads as terminal-dark
 *   without the harshness of pure black. Syntax highlighting picks up
 *   the accent and stone colors for consistency.
 * - Tables follow the same paper/dark alternation. Header row on dark,
 *   body rows on paper, to create clear scan boundaries.
 */

:root {
  /* ── Color ── */

  /* Surface */
  --color-paper:        #FAFAF7;   /* Warm paper. Reading surface. */
  --color-dark:         #0B0F19;   /* Near-black. Code, dark callouts, carousel slides. */
  --color-dark-soft:    #161B2E;   /* Elevated dark. Dark section dividers, hover states. */
  --color-white:        #FFFFFF;   /* Pure white. Only for spacing zones between sections. */

  /* Text */
  --color-ink:          #2C2C2C;   /* Primary text. Softer than pure black; easier on eyes for 20K words. */
  --color-ink-light:   #5C5C5C;   /* Secondary text. Captions, asides, footnotes. Softer match for #2C2C2C. */
  --color-ghost:       #A3A3A3;   /* Muted. Disabled, placeholder, dim labels. */
  --color-light:       #FAFAFA;   /* Text on dark surfaces. Off-white, not pure. */

  /* Accent */
  --color-accent:       #1E3A5F;   /* Deep navy. Authoritative, not generic tech-blue. */
  --color-accent-soft:  #D4DEE8;   /* Accent on paper. Softened for deep navy. Callout borders, highlights. */
  --color-accent-warm:  #D97706;   /* Warning, caution, antipattern callouts. */
  --color-accent-green: #059669;   /* Approval, "what works", checkmarks. */
  --color-accent-red:   #DC2626;   /* Error, "what's broken", cross marks. */

  /* Structure */
  --color-section-num:  #78716C;   /* Stone. § numbers, section markers. */
  --color-rule:         #E5E5E5;   /* Between sections, between elements. */
  --color-rule-dark:    #2D3348;   /* Rule on dark surfaces. */

  /* Code */
  --color-code-bg:      #0B0F19;   /* Code block background. Same as --color-dark. */
  --color-code-border:  #1E2744;   /* Code block border. Subtle lift from bg. */
  --color-code-text:    #E2E8F0;   /* Code text. Light gray on dark. */
  --color-code-keyword: #93C5FD;   /* Syntax: keyword, type. Soft blue. */
  --color-code-string:  #86EFAC;   /* Syntax: string. Soft green. */
  --color-code-comment: #6B7280;   /* Syntax: comment. Muted. */
  --color-code-accent:  #F59E0B;   /* Syntax: highlight, emphasis. Amber. */

  /* ── Typography ── */

  /* Fonts */
  --font-display:      "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:         "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:         "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  /* Size scale (modular, 1.25 ratio, body at 18px for long-form) */
  --text-xs:           0.64rem;   /* 11.5px — Tiny labels */
  --text-sm:           0.8rem;    /* 14.4px — Captions, footnotes */
  --text-base:         1rem;      /* 18px — Body text */
  --text-lg:           1.25rem;   /* 22.5px — Lead paragraphs, blockquotes */
  --text-xl:           1.563rem;  /* 28.1px — H3 */
  --text-2xl:          1.953rem;  /* 35.1px — H2 */
  --text-3xl:          2.441rem;  /* 43.9px — H1 */
  --text-4xl:          3.052rem;  /* 54.9px — Hero, title */

  /* Weight */
  --weight-normal:     400;
  --weight-medium:    500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-black:      900;

  /* Line height */
  --leading-tight:     1.3;
  --leading-normal:    1.65;      /* Long-form body. Generous for 18px. */
  --leading-relaxed:   1.85;      /* Blockquotes, asides. */

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.05em;
  --tracking-ultra:     0.12em;   /* Section numbers, kicker labels. */

  /* ── Spacing ── */

  /* Scale (4px base, 1.5 ratio for long-form breathing room) */
  --space-1:           0.25rem;   /* 4px */
  --space-2:           0.5rem;    /* 8px */
  --space-3:           0.75rem;   /* 12px */
  --space-4:           1rem;      /* 16px */
  --space-5:           1.5rem;    /* 24px */
  --space-6:           2rem;      /* 32px */
  --space-7:           3rem;      /* 48px */
  --space-8:           4rem;      /* 64px */
  --space-9:           6rem;      /* 96px */
  --space-10:          8rem;      /* 128px */

  /* Section rhythm */
  --section-pad-top:   var(--space-9);    /* 96px above each section */
  --section-pad-bot:   var(--space-7);    /* 48px below each section */

  /* Content width */
  --content-width:     42rem;     /* 672px. Narrow for long-form. ~65-70cpl at 18px. */
  --content-wide:      56rem;     /* 896px. For tables, wide code, diagrams. */
  --sidebar-width:     16rem;     /* 256px. Sticky TOC. */

  /* ── Layout ── */

  --border-radius-sm:  3px;
  --border-radius-md:  6px;
  --border-radius-lg:  12px;

  /* ── Component: Section Divider ── */
  /* Each major section (§1, §2, ...) gets a visual break */
  --section-marker-size: var(--text-xs);
  --section-marker-color: var(--color-section-num);
  --section-marker-tracking: var(--tracking-ultra);

  /* ── Component: Code Block ── */
  --code-font-size:     0.85rem;    /* ~15.3px. Slightly smaller than body. */
  --code-line-height:   var(--leading-tight);
  --code-pad:           var(--space-5);
  --code-radius:        var(--border-radius-md);
  --code-header-height: 2.5rem;     /* Language label strip at top */

  /* ── Component: Table ── */
  --table-font-size:    var(--text-sm);
  --table-header-bg:    var(--color-dark);
  --table-header-color: var(--color-light);
  --table-row-alt:      #F5F5F0;    /* Alternating row. Slightly darker than paper. */
  --table-border:       var(--color-rule);

  /* ── Component: Blockquote ── */
  --quote-border:       3px solid var(--color-accent);
  --quote-pad-left:     var(--space-6);

  /* ── Component: Callout ── */
  --callout-pad:        var(--space-5);
  --callout-radius:     var(--border-radius-md);
  --callout-border:     3px solid;

  /* ── Component: Navigation ── */
  --nav-height:         3rem;
  --progress-height:    2px;

  /* ── Motion ── */
  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
}

/* ── Font face declarations ── */
/* These are Google Fonts. For production, self-host them. */

/* ── Dark mode ── */
/* The essay default is light-on-paper. Dark mode swaps paper/dark
   and adjusts accent contrast. Dark mode is opt-in via media query
   or toggle, not the default. */

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:      #0B0F19;
    --color-dark:       #1A1A2E;
    --color-dark-soft:  #252A3A;
    --color-white:      #0B0F19;
    --color-ink:        #E5E5E5;
    --color-ink-light:  #A3A3A3;
    --color-ghost:      #525252;
    --color-light:      #0B0F19;
    --color-accent:     #7CA0C7;   /* Lighter navy for dark bg contrast. Softer than pure blue. */
    --color-accent-soft:#1E3A5F;   /* Matches the light-mode accent on dark bg. */
    --color-rule:       #2D3348;
    --color-rule-dark:  #3D4460;
    --color-section-num:#A3A3A3;
    --table-header-bg:  #161B2E;
    --table-row-alt:    #111827;
    --color-code-bg:    #161B2E;
    --color-code-border:#2D3348;
  }
}