/* Design tokens. Source: SPEC.md + studio-memory.md. */

:root {
  /* Typography. Inter for body/display, Cascadia Mono for code/prompts. */
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-mono: "Cascadia Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Typography — weights. Note: --font-light is 100 (Inter Thin) for
     backwards compat with existing rules — not Inter's "Light" 300 cut. */
  --font-light: 100;
  --font-extralight: 200;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* Typography — scale (mobile defaults) */
  --text-hero-size: 31px;
  --text-hero-line: 35px;
  --text-display-size: 31px;
  --text-display-line: 38.75px;
  --text-title-project-size: 13px;
  --text-title-project-line: 18.2px;
  --text-quote-size: 25px;
  --text-quote-line: 32.5px;
  --text-body-lg-size: 18px;
  --text-body-lg-line: 25.6px;
  --text-body-base-size: 16px;
  --text-body-base-line: 24px;
  --text-body-sm-size: 12px;
  --text-body-sm-line: 19.5px;
  --text-link-sm-size: 14px;
  --text-link-sm-line: 24px;

  /* Typography — hero subline. Distinct from --text-body-lg (18/25.6):
     Figma "Dark/Full Page Composite — On Load" 55:9580 uses 16/25.6. */
  --text-subline-size: 16px;
  --text-subline-line: 25.6px;

  /* Typography — overview row number (Inter Thin 100, 34px). */
  --text-overview-num-size: 34px;
  --text-overview-num-line: 1.1;

  /* Typography — row title shared scale (Studio Brain rows + Tools rows).
     22/28 -0.005em. The hiring__role selector uses 22px + -0.005em from
     these tokens but a different line-height (25.6px) — kept inline. */
  --text-row-title-size: 22px;
  --text-row-title-lh: 28px;
  --text-row-title-tracking: -0.005em;

  /* Typography — Studio Brain description (Figma 55:9704 "Step/Summary" 14/21).
     Snapped to nearest existing tokens: size = --text-link-sm-size (14px),
     line = --text-body-sm-line (19.5px, vs Figma 21px). */
  --text-description-size: var(--text-link-sm-size);
  --text-description-line: var(--text-body-sm-line);

  /* Tracking — sourced from Figma vars (type/body/sm letterSpacing 0.5,
     hero eyebrow 0.48, hiring eyebrow 0.96) and the On Load frame nodes.
     px instead of em so the token transfers cleanly across font-sizes. */
  --tracking-hero: -0.31px;
  --tracking-display: -0.31px;
  --tracking-hiring-title: -1px;
  --tracking-overview-num: -0.34px;
  --tracking-eyebrow: 0.48px;
  --tracking-eyebrow-strong: 0.96px;
  --tracking-body-sm: 0.5px;

  /* Color — light. Primary tokens reconciled with Figma color table
     2026-05-22. Tokens not present in Figma table (--bg-recessed,
     --bg-callout, --bg-card, --bg-prompt, --fg-quiet, etc.) kept at
     prior values; only Figma-named primitives updated below. */
  --bg-base: #e0ddda;
  --bg-nav: var(--bg-base);
  --bg-subtle: #f5f1ee;
  --bg-recessed: #ebeae6;
  --bg-surface-2: #ebe9e6;
  --fg-primary: #21201c;
  --fg-secondary: #595550;
  --fg-tertiary: #7d7a77;
  --fg-quiet: #9c9997;
  --fg-muted: #999794;
  /* Inline body-copy link color = the studio accent, not the platform blue. */
  --fg-link: var(--accent-primary);

  /* Workflow step badge colors — audit pass 2026-05-22 maps these to
     Figma semantic/text/* values directly:
       "You do"        → semantic/text/heading
       "Prompt Claude" → semantic/text/accent
       "You + Claude"  → semantic/text/accent (richer hue)
     Light/dark swap via .dark scope below. */
  --badge-you: #21201c;     /* light: text/heading */
  --badge-prompt: #a67c42;  /* light: text/accent */
  --badge-mixed: #c8893f;   /* light: text/accent (richer) */

  /* Prompt code body color — Figma 54:7438 / 55:9113 (CC Prompt). */
  --prompt-code-fg: #5b5b5a;

  /* Hiring brain icon — kept as its own semantic token so the contrast
     intent against the callout surface stays controlled per mode.
     Light: warm gray for low-contrast presence on the bg-callout panel.
     Dark: deep brown to match Figma 57:11619 dark composite. */
  --fg-brain-icon: #AEA7A0;

  /* Card-panel icon stamp — Figma 57:10923. Matches the primary text color
     (#21201C in light). Override in .dark for visibility. */
  --fg-icon-primary: #21201c;

  /* Sheet title icon — Figma 148:7762 / 150:11123 (mobile sheet header).
     Primary token holds the raw hex pulled from the Figma frame; the
     semantic --fg-icon-sheet aliases it so consumers don't reference the
     primary directly. Light = #AEA7A0 (warm gray). Dark override below. */
  --color-warm-icon: #AEA7A0;
  --fg-icon-sheet: var(--color-warm-icon);

  /* Inset callout surface — used by the "What I build first" card in
     Section 06. Sinks deeper than --bg-recessed in dark so the card
     reads as a separate plane against bg-base #0e0c0b. */
  --bg-callout: #ebeae6;

  /* Overview card surface (Section 1 — "The system, in 90 seconds" 4 cards).
     Light: matches Figma semantic/bg/card #ebeae7. Dark: transparent so the
     card reads against --bg-base without a separate plane. */
  --bg-card: #ebeae7;
  --fg-on-accent: #21201c;
  --border-subtle: #d4d0ca;
  --border-button: var(--border-subtle);
  --border-strong: #0d0c0a;
  --accent-primary: #daff60;
  /* Channel-only triplet for rgba()/rgb() expansions — keeps gradient stops
     and shadow alphas in sync with --accent-primary. Comma-separated so it
     plugs into the legacy rgba(r, g, b, a) syntax. */
  --accent-primary-rgb: 218, 255, 96;
  --fg-accent: #ca4541;
  --hover-accent: #daff60;
  --hover-mint: #58f5d2;
  --bg-tooltip: #fffefc;
  --fg-tooltip: #21201c;
  --shadow-tooltip: 0 8px 4px rgba(0, 0, 0, 0.07);
  --decoration-fg-primary: rgba(33, 32, 28, 0.4);

  /* Spacing — 4pt scale (half-steps exist for tight inline padding only). */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  /* --space-3-5: half-step (14px) — Figma prompt inset, learnings gap,
     tab-panel padding (142:4484, 142:4582, 142:4703) consistently use 14. */
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  /* --space-10: 40px — hero mobile padding-block (Figma 142:4357 px-24 py-40). */
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout — containers */
  --container-page: 1440px;
  --container-wide: 1035px;
  --container-feature: 984px;
  --container-prose: 686px;

  /* Layout — horizontal padding */
  --pad-h: 24px;

  /* Text emphasis underline — semantic tokens for inline-word accent underlines
     (e.g. the marked role copy in the hiring section). */
  --underline-emphasis-thickness: var(--space-0-5);
  --underline-emphasis-offset: 5px;
  --underline-emphasis-radius: 1px;
  --underline-emphasis-color: var(--accent-primary);

  /* Text emphasis slant — italic-style lean. Driven by the Inter Variable
     `slnt` axis (range -10..0, negative leans forward). Unitless because
     font-variation-settings takes a raw axis value, not an angle. */
  --text-emphasis-slant: -4;

  /* Radius */
  --radius-xs: 1px;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Semantic surface — Studio Brain prompt panel (Figma 55:9705 "CC Prompt").
     Mode-following: light surface in light, dark surface in dark.
     Radius snapped from Figma 16px to --radius-md (8px). */
  --bg-prompt: #ebeae6;
  --radius-prompt: var(--radius-md);

  /* Inline <code> chip bg for the hiring brain-text callout — translucent
     foreground so the chip reads as a subtle tint over the callout surface
     in both modes. Light: 4% black. Dark override below: 6% white. */
  --bg-code-inline: rgba(0, 0, 0, 0.04);

  /* Toggle knob — both modes (Figma DarkModeToggle component). Hard
     white, intentionally constant across modes. */
  --surface-toggle-knob: #ffffff;

  /* Step prompt deep surface — Figma 54:7438 step 09 dark slab. Light
     mode swaps to the gates panel fill so the workflow's expanded
     content reads as one consistent light surface; dark keeps the
     deeper plane. Override lives in the .dark block. */
  --bg-prompt-deep: var(--bg-subtle);

  /* Shadow */
  --shadow-elevated: 0 8px 4px rgba(0, 0, 0, 0.07);

  /* Motion — durations */
  --dur-micro: 120ms;
  --dur-fast: 180ms;
  --dur-standard: 220ms;
  --dur-expand: 280ms;
  --dur-collapse: 220ms;
  --dur-link-click: 420ms;
  --dur-reveal: 800ms;
  --dur-orchestrated: 900ms;
  --stagger-section: 100ms;

  /* Motion — durations (toggle slide) */
  --dur-figma-slide: 1280ms;

  /* Hover comet — 6s edge-to-edge at 1440px = 240 px/s linear (per Figma proto 57:10951/57:11158).
     Speed + trail length live in scripts/hover.js. Glow + head dimension are still consumed by CSS. */
  --hover-comet-head: 4px;
  --hover-comet-glow: 0 0 4px rgba(var(--accent-primary-rgb), 0.9);

  /* Press scale — matches levibahn.com convention from studio-memory.md §Motion. */
  --press-scale-button: 0.985;
  --press-scale-tap: 0.92;

  /* Motion — easings */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-figma-gentle: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-standard: var(--ease-out-strong);
  /* Softer ease-out for collapse — long glide into the resting state so
     section close animations don't slam shut at the end. */
  --ease-collapse: cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== On-load entrance cascade =====
     Sequence: nav → hero (existing reveal) → overview rows → hiring section
     → dark toggle. Each phase starts before the previous one finishes (Emil:
     stagger is decorative, never block). Tune any single value here to retime
     the whole cascade without touching component CSS. */
  --load-nav-delay: 0ms;
  --load-nav-dur: 700ms;
  --load-hero-base: 200ms;       /* hero's first .reveal child fires here */
  --load-hero-stagger: 100ms;    /* between successive hero .reveal siblings */
  --load-row-base: 700ms;        /* overview row 01 fires here */
  --load-row-stagger: 120ms;     /* between successive rows */
  --load-row-dur: 700ms;
  --load-hiring-base: 1300ms;    /* hiring eyebrow fires here */
  --load-hiring-stagger: 100ms;
  --load-toggle-delay: 2200ms;   /* dark mode toggle slides in last */

  /* Z-index */
  --z-1: 1;
  --z-2: 2;
  --z-10: 10;
  --z-nav: 20;
  --z-overlay: 50;

  /* Layout — nav heights */
  --nav-h-desktop: 64px;
  --tabbar-h-mobile: 64px;

  /* Sheet dark-handle expanded color — exposed as a top-level token so the
     transition rule in app.css can reference it without a dark-scope lookup.
     Resolution log 2026-05-21: handle darkens from --fg-secondary (#98938d)
     to --color-fg-tertiary (#545352) when sheet reaches max snap. Light mode
     handle stays white in both states (no expanded override). */
  --color-fg-tertiary: #545352;

  /* ===== Tier-3 bottom sheet (mobile) — MOBILE-UPDATE-SPEC §3.1.
     Definitive Figma values from owner resolution log 2026-05-21.
     Snap heights are absolute px (Figma reference viewport 844px tall):
       - initial: top:562 → 282px visible from bottom
       - max:     top:184 → 660px visible from bottom (hard max). */
  --surface-sheet-bg: var(--bg-base);
  --sheet-radius: var(--radius-lg);
  --sheet-snap-initial: 282px;
  --sheet-snap-max: 660px;
  --sheet-pad-top: var(--space-3);   /* 12px */
  --sheet-pad-bottom: var(--space-8); /* 32px */
  --sheet-pad-inline: var(--space-6); /* 24px */
  --sheet-gap: var(--space-6);
  --sheet-shadow: drop-shadow(0 -2px 5px rgba(40, 24, 0, 0.08));
  --sheet-handle-color: #ffffff;
  --sheet-handle-width: 34px;
  --sheet-handle-height: 5px;
  --sheet-handle-radius: 8px;
  /* Stats section inside sheet — divider follows mode; numerals stay in
     the dark scale across both modes (design choice, preserve). */
  --sheet-stats-divider: var(--border-subtle); /* light: #d4d0ca */
  --sheet-stats-num: #d0ceca;                  /* both modes */
  --sheet-stats-label: var(--text-accent);     /* gold/warm — Figma semantic/text/accent */

  /* Active/tapped card dark surface — §4.6 resolved, cascades to desktop. */
  --bg-card-dark: #121110;

  /* Gates container dark fill — audit resolution 2026-05-22. Reuses the
     same hex as --bg-card-dark; kept as a distinct semantic alias so a
     future divergence doesn't have to fan-out across both components. */
  --bg-gates-dark: var(--bg-card-dark);

  /* Semantic text/accent — distinct from --fg-accent (#ca4541, the warm-red
     used for required tags). text/accent is the warm-brown highlight used
     on hiring eyebrow, prompt badge, card CTA, etc.
     Light: Figma semantic/text/accent #a67c42. Dark: #8e7d65. */
  --text-accent: #a67c42;
}

@media (min-width: 768px) {
  :root {
    --pad-h: 32px;
    /* Phase 0 reconcile: Figma "Dark/Full Page Composite — On Load" uses
       size/hero=31/35 and size/display=31/38.75 across breakpoints, not the
       SPEC.md desktop bump (68/72 + 48/55.2). Keeping hero + display at the
       Figma value here; SPEC needs updating. */
    --text-title-project-size: 32px;
    --text-title-project-line: 40px;
    --text-body-sm-size: 13px;
  }
}

@media (min-width: 1024px) {
  :root {
    --pad-h: 48px;
  }
}

@media (min-width: 1440px) {
  :root {
    --pad-h: 128px;
    --text-quote-size: 39px;
    --text-quote-line: 46.8px;
  }
}

/* Color — dark. 1:1 with Figma "Dark/Full Page Composite" variables.
   bg/base, bg/nav: #0e0c0b · semantic/divider: #1c1a18
   text/heading: #d0ceca · text/body: #98938d · text/quiet, text/muted: #545352
   action/primary: #daff60 */
.dark {
  /* Dark — primary tokens reconciled with Figma color table 2026-05-22. */
  --bg-base: #0d0c0b;
  --bg-nav: #0d0c0b;
  --bg-subtle: #1b1a18;
  --bg-recessed: #080707;
  --bg-callout: #121110;
  --bg-surface-2: #23211f;
  --fg-primary: #d0cdca;
  --fg-secondary: #989089;
  --fg-tertiary: #545351;
  --fg-quiet: #3d3c3b;
  --fg-muted: #3d3c3b;
  --fg-link: var(--accent-primary);
  /* Audit pass 2026-05-22 — badges follow Figma semantic/text/* dark values.
     "You do" → heading · "Prompt Claude" → accent · "You + Claude" → link. */
  --badge-you: #d0ceca;     /* text/heading */
  --badge-prompt: #8e7d65;  /* text/accent */
  --badge-mixed: #c1b29c;   /* text/link */
  --prompt-code-fg: #5b5b5a;
  --fg-on-accent: #100f0e;
  --border-subtle: #1c1a18;
  --border-strong: #d0ceca;
  --accent-primary: #daff60;
  --hover-accent: #daff60;
  --hover-mint: #58f5d2;
  --fg-accent: #ca4541;
  --bg-tooltip: #23211f;
  --fg-tooltip: #eae9e8;
  --shadow-tooltip: 0 8px 4px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 16px 32px rgba(0, 0, 0, 0.45);
  --decoration-fg-primary: rgba(208, 206, 202, 0.4);

  /* Dark-mode prompt surface = --bg-base (#0e0c0b, exact Figma match). */
  --bg-prompt: var(--bg-base);

  /* Step prompt deep surface — Figma 54:7438 dark plane. Deeper than
     --bg-base so the mono code block reads as a distinct slab. */
  --bg-prompt-deep: #080707;

  /* Dark-mode card surface stays transparent — cards read against bg-base. */
  --bg-card: transparent;

  /* Inline <code> chip bg — dark scope uses translucent white instead of
     translucent black so the chip stays visible on the dark callout. */
  --bg-code-inline: rgba(255, 255, 255, 0.06);

  /* Pin the brain icon to its original Figma value in dark; light gets a
     softer warm gray via :root above. */
  --fg-brain-icon: #2b2722;

  /* Sheet overrides — handle + stats divider tuned for dark. Sheet bg
     follows --bg-base which already swaps via .dark. No overlay (Figma
     sheet has no scrim — resolution log 2026-05-21). */
  --sheet-handle-color: var(--fg-secondary); /* #98938d */
  --sheet-stats-divider: #1c1a18;            /* dark */
  --sheet-stats-label: var(--text-accent);   /* gold/warm dark — #8e7a65 */

  /* Sheet title icon — Figma 150:11123 dark. Primary overrides to
     #2B2722 (deep warm brown). Semantic --fg-icon-sheet alias inherits. */
  --color-warm-icon: #2B2722;

  /* Semantic text/accent dark — Figma #8e7a65. */
  --text-accent: #8e7a65;
}

/* ============================================================
   Component-scoped token variants
   ============================================================
   Selectors that re-declare a small group of semantic tokens for a
   sub-region. Kept here (not in app.css) so every raw hex value lives
   in tokens.css. Each block names the component + the variant intent.
   ============================================================ */

/* Brain-row prompt (Section 3) — dark muted-text variant. Drops
   contrast across the foreground scale so inline code chips read as
   dimmed body copy rather than callouts. Border + bg-subtle locked
   to #1c1a18 so the chip never lifts above the surrounding plane. */
.dark .brain-row__prompt {
  --fg-primary: #d0ceca;
  --fg-secondary: #98938d;
  --fg-tertiary: #545352;
  --fg-quiet: #545352;
  --fg-muted: #545352;
  --border-subtle: #1c1a18;
  --bg-subtle: #1c1a18;
}