/* ──────────────────────────────────────────────────────────────────────────
   GPT-Live Hub · Design Tokens
   Editorial Mono — warm cream + serif display + mono metadata + single accent
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Ink (text) */
  --ink:          #14110F;
  --ink-2:        #4A423B;
  --ink-3:        #6B6258;

  /* Paper (surfaces) */
  --paper:        #F5F1EA;
  --paper-2:      #ECE5D7;
  --paper-3:      #E0D8C6;

  /* Rules (1px hairlines) */
  --rule:         rgba(20, 17, 15, 0.12);
  --rule-strong:  rgba(20, 17, 15, 0.28);
  --rule-soft:    rgba(20, 17, 15, 0.06);

  /* Accent — single, restricted */
  --accent:       #E04E1B;     /* vermilion */
  --accent-2:     #B83A12;     /* pressed */
  --accent-soft:  #FCE8DE;     /* tint background */

  /* Inverse / code blocks */
  --code-bg:      #14110F;
  --code-fg:      #F5F1EA;
  --code-fg-2:    #A89F93;

  /* Legacy token aliases — keep so existing class names keep working */
  --text:         var(--ink);
  --muted:        var(--ink-2);
  --subtle:       var(--ink-3);
  --bg:           var(--paper);
  --surface:      var(--paper-2);
  --surface-2:    var(--paper-3);
  --border:       var(--rule);
  --border-strong: var(--rule-strong);

  /* Brand alias — kept so HTML using "var(--brand)" doesn't break.
     We deliberately do NOT use it as a primary brand color anymore.
     Restrict accent usage in CSS files. */
  --brand:        var(--accent);
  --brand-600:    var(--accent-2);
  --brand-700:    var(--accent-2);

  /* Semantic (muted) */
  --success:      #4D7C0F;
  --warn:         #B45309;
  --danger:       #B91C1C;
  --info:         #1D4ED8;

  /* Typography */
  --font-display: "Source Serif 4", "Source Serif Pro", "Source Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:        0.75rem;
  --fs-sm:        0.875rem;
  --fs-base:      1rem;
  --fs-md:        1.0625rem;
  --fs-body:      1.0625rem;
  --fs-lg:        1.25rem;
  --fs-xl:        1.5rem;
  --fs-2xl:       1.875rem;
  --fs-3xl:       clamp(2.25rem, 5vw, 3.75rem);
  --fs-4xl:       clamp(2.75rem, 6vw, 4.5rem);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-10: 64px;
  --sp-12: 96px;

  /* Layout */
  --container:       1120px;
  --container-narrow: 720px;
  --reading:         38em;

  /* Type metrics */
  --lh-body:         1.7;
  --lh-tight:        1.1;
  --lh-snug:         1.35;
  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.015em;
  --tracking-meta:   0.06em;

  /* Motion */
  --ease:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur:     180ms;
  --dur-slow: 320ms;

  /* Borders / corners — Editorial Mono uses minimal radii */
  --r-0:    0px;
  --r-1:    2px;
  --r-2:    4px;

  /* No more shadows — use hairlines instead. Keep the variable name to avoid
     surprises in legacy rules, but it now resolves to transparent. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* Dark mode — warm dark, not blue-black */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:          #EDE7DC;
    --ink-2:        #B8AFA2;
    --ink-3:        #897F73;

    --paper:        #131110;
    --paper-2:      #1C1916;
    --paper-3:      #25211D;

    --rule:         rgba(237, 231, 220, 0.10);
    --rule-strong:  rgba(237, 231, 220, 0.26);
    --rule-soft:    rgba(237, 231, 220, 0.05);

    --accent:       #F26B3E;
    --accent-2:     #D4501F;
    --accent-soft:  #2A1A12;

    --code-bg:      #0A0908;
    --code-fg:      #EDE7DC;
    --code-fg-2:    #897F73;

    --success:      #84CC16;
    --warn:         #F59E0B;
    --danger:       #F87171;
    --info:         #60A5FA;
  }
}