/* Comfy — design tokens. The ONLY file allowed to contain raw hex. */

/* ── Layer 1: primitives ─────────────────────────── */
:root {
  /* espresso ramp — warm blacks */
  --char-950: #120E0B; --char-900: #171310; --char-850: #1D1814;
  --char-800: #241E19; --char-700: #322A23;
  /* cream ramp — text */
  --cream-50: #F7F1E8; --cream-300: #D8CCBA; --cream-500: #A99C8A; --cream-700: #8A7E6E;
  /* ember — the one accent */
  --ember-300: #FFC894; --ember-400: #FFB366; --ember-500: #FF9640; --ember-600: #F07E1F;
  --ember-glow: rgba(255,150,64,.22);
  /* data hues */
  --sage-500: #8FBF8F; --clay-500: #D97A6C; --lav-400: #B8A8E0;

  /* type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, monospace;
  --fs-hero: clamp(2.6rem, 6vw, 4.5rem);
  --fs-title: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3: 1.25rem;
  --fs-body: .9375rem;
  --fs-data: .875rem;
  --fs-micro: .75rem;

  /* space (4px base) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem;

  /* shape */
  --r-card: 24px; --r-panel: 14px; --r-pill: 999px;

  /* motion */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 150ms; --t-med: 300ms; --t-slow: 600ms;
}

/* ── Layer 2: semantic ───────────────────────────── */
:root {
  --bg-page: var(--char-950);
  --bg-card: var(--char-850);
  --bg-elevated: var(--char-800);
  --bg-inset: var(--char-900);
  --text-primary: var(--cream-50);
  --text-secondary: var(--cream-300);
  --text-muted: var(--cream-500);
  --text-faint: var(--cream-700);
  --accent: var(--ember-500);
  --accent-hover: var(--ember-400);
  --accent-strong: var(--ember-600);
  --accent-glow: var(--ember-glow);
  --positive: var(--sage-500);
  --negative: var(--clay-500);
  --compute: var(--lav-400);
  --border-hairline: rgba(247,241,232,.08);
  --border-strong: var(--char-700);
  --shadow-soft: 0 12px 40px -16px rgba(0,0,0,.55);
  --shadow-glow: 0 4px 24px var(--accent-glow);
}

/* ── Layer 2b: light skin (semantic only — same components) ──
   Felt daylight: warm paper, cocoa ink, the same ember accent. */
:root[data-theme="light"] {
  --bg-page: #FAF6EF;
  --bg-card: #FFFDF9;
  --bg-elevated: #F3EBDF;
  --bg-inset: #F0E7D9;
  --text-primary: #2A211A;
  --text-secondary: #5A4A3C;
  --text-muted: #8A7A6A;
  --text-faint: #A2917F;
  --accent: #C25F10;
  --accent-hover: #D96F18;
  --accent-strong: #A54D08;
  --accent-glow: rgba(194,95,16,.22);
  --positive: #3E7A4E;
  --negative: #B24230;
  --compute: #6B4FBF;
  --border-hairline: rgba(42,33,26,.10);
  --border-strong: rgba(42,33,26,.18);
  --shadow-soft: 0 12px 40px -18px rgba(90,74,60,.28);
  --shadow-glow: 0 4px 24px var(--accent-glow);
}
:root[data-theme="light"] body.grain::before { opacity: .25; }

/* dark: 12px muted text sat at 4.43:1 — one step brighter clears AA */
:root { --text-muted: #B5A697; }

/* small print clears AA on dark: --text-faint carries 12px meta text */
:root { --text-faint: #A2937F; }

/* light skin re-tunes the primitives themselves, so components that use
   them directly (chips, meters, pills) stay legible without per-rule fixes */
:root[data-theme="light"] {
  --ember-300: #A85410; --ember-400: #96490C; --ember-500: #C25F10; --ember-600: #8F4308;
  --ember-glow: rgba(194,95,16,.20);
  --sage-500: #2E6B3E; --clay-500: #A3372A; --lav-400: #5A3FB0;
}

/* light small-print ramp: 11px footnotes must clear AA on paper */
:root[data-theme="light"] { --text-faint: #6F6154; }

/* aliases so feature pages authored against the old skin keep resolving */
:root {
  --font-editorial: var(--font-display);   /* was Fraunces; now felt display */
  --on-accent: var(--char-950);            /* text on an accent fill */
  --r-ctl: var(--r-panel);                 /* control radius */
}