/* ============================================================
   tokens.css (inlined with EDITMODE markers preserved)
   ============================================================ */
:root {
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Fraunces", ui-serif, Georgia, serif;
}
:root[data-type="editorial"] { --font-display: "Fraunces", ui-serif, Georgia, serif; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
:root[data-type="neutral"]   { --font-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; }

:root {
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px;
  --fs-xl: 28px; --fs-2xl: 40px;
  --fs-3xl: clamp(40px, 5.4vw, 76px);
  --fs-4xl: clamp(56px, 9vw, 132px);
  --lh-tight: 0.98; --lh-head: 1.05; --lh-body: 1.55;
  --tr-head: -0.028em; --tr-display: -0.035em; --tr-mono: 0.003em; --tr-eyebrow: 0.12em;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-5: 20px;
  --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in-out: cubic-bezier(.6,0,.2,1); --ease-spring: cubic-bezier(.3,1.4,.4,1);
  --d-fast: 180ms; --d-med: 320ms; --d-slow: 600ms;
  --max-w: 1200px; --max-w-wide: 1360px; --max-w-prose: 720px; --nav-h: 64px; --hair-w: 1px;
}
:root[data-density="compact"]     { --s-section-y: var(--s-8); }
:root[data-density="comfortable"] { --s-section-y: var(--s-9); }
:root[data-density="spacious"]    { --s-section-y: var(--s-10); }
:root { --s-section-y: var(--s-9); }

:root {
  --accent: #4fd1c5; --accent-2: #2ca4b5; --accent-glow: rgba(79,209,197,0.28);
  --warm: #d97706; --warm-2: #f59e0b; --warm-glow: rgba(217,119,6,0.25);
}
:root[data-palette="teal-amber"]      { --accent:#4fd1c5; --accent-2:#2ca4b5; --accent-glow:rgba(79,209,197,0.28); --warm:#d97706; --warm-2:#f59e0b; --warm-glow:rgba(217,119,6,0.25); }
:root[data-palette="sapphire-copper"] { --accent:#7aa7ff; --accent-2:#4d7fd6; --accent-glow:rgba(122,167,255,0.28); --warm:#b87333; --warm-2:#d68e54; --warm-glow:rgba(184,115,51,0.25); }
:root[data-palette="cobalt-ember"]    { --accent:#3b68f5; --accent-2:#264ec5; --accent-glow:rgba(59,104,245,0.24); --warm:#e07650; --warm-2:#ee9778; --warm-glow:rgba(224,118,80,0.22); }

/* NEW cobalt-amber palette for FrameBright.ai */
:root[data-palette="cobalt-amber"] {
  --accent: #F5A623;
  --accent-2: #FFB84D;
  --accent-glow: rgba(245,166,35,0.26);
  --warm: #2F5EFB;
  --warm-2: #6387ff;
  --warm-glow: rgba(47,94,251,0.28);
}

:root { --good: #34d399; --bad: #ef4444; --warn: #f59e0b; }

:root, :root[data-theme="light"] {
  --bg:    #f7f5f0;
  --bg-1:  #ffffff;
  --bg-2:  #efece4;
  --bg-3:  #e6e2d6;
  --bg-inv: #06101a;
  --fg:    #0c1722;
  --fg-2:  #3c4a5a;
  --fg-3:  #6c7d8f;
  --fg-4:  #aab4bf;
  --line:   rgba(12,23,34,0.08);
  --line-2: rgba(12,23,34,0.16);
  --hair:   rgba(12,23,34,0.10);
  --code-bg: #ffffff; --code-fg: #0c1722;
  --sh-1: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(20,40,60,0.08);
  --sh-2: 0 0 0 1px var(--accent-glow), 0 12px 48px rgba(20,40,60,0.12);
}
:root[data-theme="dark"] {
  --bg: #06101a; --bg-1: #0a1826; --bg-2: #0f2334; --bg-3: #142d43; --bg-inv: #f7f6f2;
  --fg: #e8eef5; --fg-2: #a5b4c4; --fg-3: #6c7d8f; --fg-4: #475661;
  --line: rgba(255,255,255,0.06); --line-2: rgba(255,255,255,0.12); --hair: rgba(255,255,255,0.08);
  --code-bg: #07131d; --code-fg: #e6edf3;
  --sh-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
  --sh-2: 0 0 0 1px var(--accent-glow), 0 12px 48px rgba(0,0,0,0.45);
}