/*
  css/tokens.css — design tokens.

  STATUS: typeface + accent confirmed (Space Grotesk / DM Sans / Geist
  Pixel; Oxblood accent — see the font/color tokens below and
  docs/superpowers/specs/2026-09-10-typography-system-design.md).
  Background is still pending — colors below remain neutral/grayscale
  placeholder styling only there. Nothing outside this file should
  hardcode a color or font (§12).

  Named breakpoints mirror CLAUDE.md §9. CSS custom properties can't be read
  inside @media conditions, so layout.css/components.css repeat these as
  literal px values — keep them in sync with the numbers here.
  --bp-sm: 480px   (large phones)
  --bp-md: 768px   (tablets)
  --bp-lg: 1024px  (small laptops)
  --bp-xl: 1280px  (desktop)
*/

:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape */
  --radius: 8px;
  /* Larger radius for a more generous card treatment (e.g. the Intelkin
     hero metadata block) — kept separate from --radius so it doesn't
     cascade into every other bordered box site-wide. */
  --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Neutral/grayscale placeholder palette — not final, see status note above */
  --color-bg: #ffffff;
  --color-surface: #f4f4f5;
  --color-border: #d4d4d8;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  /* Accent (confirmed 2026-09-10, CLAUDE.md §12) — the first real accent
     color in this codebase. Oxblood. In use as of the CDW case study
     (research-aggregator.html): the workflow-compare before/after arrow
     and the "New Workflow" caption — reserved for tiny moments only,
     never a card background or large surface. */
  --color-accent: #92140C;
  --color-accent-text: #ffffff;

  /* Prototype-app palette (2026-09-21) — used only inside the Operators on
     the Go case study's two embedded prototypes (SMS thread + dashboard),
     which stand in for a real product (Micromart) and so keep an
     authentic green iOS-style look instead of the site accent. Never used
     for page chrome. The deep green carries white text at AA contrast. */
  --color-app-green: #2F9E5C;
  --color-app-green-deep: #24794A;
  --color-app-green-tint: #E8F5EE;
  --color-app-bubble-in: #E9E9EB;

  /* Micromart dashboard palette (2026-09-21) — for the Price Nudges
     dashboard prototype only; mirrors the real dashboard's visual system.
     --color-app-muted is the spec's warm gray, kept for icons/rules;
     --color-app-muted-text is a slightly darker step for small text so it
     clears AA on white. */
  --color-app-bg: #FBFAF8;
  --color-app-card: #FFFFFF;
  --color-app-line: rgba(0, 0, 0, 0.06);
  --color-app-text: #171814;
  --color-app-muted: #8B8577;
  --color-app-muted-text: #6E685B;
  --color-app-neg: #D6483E;
  --color-app-grid: #E4E1D8;
  --color-app-bar-current: #D9D5CA;
  --color-app-card-shadow: 0 1px 2px rgba(23, 24, 20, 0.04), 0 6px 18px rgba(23, 24, 20, 0.05);

  /* Typeface system (CLAUDE.md §12 confirmed 2026-09-10 — see
     docs/superpowers/specs/2026-09-10-typography-system-design.md).
     Headline: Space Grotesk, weight 700 — H1s and every H2-equivalent
     sub-headline. Body: DM Sans — paragraphs, ledes, metadata values,
     UI chrome. Label: Geist Pixel, weight 400 (its only weight) —
     short all-caps eyebrows/metadata labels only, never a value or a
     sentence. Loaded via Google Fonts in every page's <head> — see any
     page for the exact <link> tags. Background color is still pending,
     see the STATUS comment at the top of this file. */
  --font-headline: "Space Grotesk", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-label: "Geist Pixel", var(--font-body);
  /* Real system monospace, not a design choice — used only by the
     Intelkin terminal card, which is deliberately exempt from the
     Headline/Body/Label system (it's simulating a real terminal
     window). Tokenized so CLAUDE.md §14's "no font values outside
     tokens.css" holds even for this exception. */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Page-scoped alternate type system (2026-09-11) — Newsreader (headline
     serif; replaced Instrument Serif site-wide on 2026-09-20) /
     Public Sans / IBM Plex Mono, applied only on the homepage and case
     study pages via css/typography-v2.css (NOT the site-wide default
     above, which stays Space Grotesk/DM Sans/Geist Pixel everywhere
     else — resume/feedback/fun/nav are explicitly out of scope). This
     is the same trio Intelkin used to run as its own one-off
     exception before that was retired into the site-wide system on
     2026-09-10 — Intelkin does NOT currently carry these fonts (that
     exception was fully deleted, not just disabled), so it gets this
     scoped system applied like every other case study now, not
     skipped as "already matching." Instrument Serif shipped only weight
     400 (no bold), which is why typography-v2.css used to force 400 on
     every headline; Newsreader has real weights, so those rules now read
     --font-headline-serif-weight instead. */
  --font-headline-serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* Newsreader is a variable font (weights 400-700). Headlines in the serif
     system use 600: at 400 it reads thin next to the body copy. */
  --font-headline-serif-weight: 600;
  --font-body-sans: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-label-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}