/* tokens.css — demo design tokens
 *
 * Cloned 2026-05-07 from landing/resources/css/tokens.css with the
 * --landing-* namespace renamed to --demo-*. Locked palette:
 *   - primary  : pure black (Mailchimp/Vercel/Linear vibe)
 *   - accent   : desaturated teal #41799D (lifts to #7BA4C2 in dark for AAA)
 *   - emerald  : reserved for --demo-success only
 *
 * See docs/archived/demo/DESIGN.md §2 for the full rationale and lock date.
 *
 * The bridge to BuilderJS canon (--bjs-*) is one-way: tokens here mirror
 * --bjs-* semantics but are an independent snapshot owned by demo.
 * Do NOT write to --bjs-* from any demo stylesheet.
 */

:root {
  /* ─── Surfaces & text ─── */
  --demo-bg: #ffffff;
  --demo-bg-elevated: #f7f8fa;
  --demo-text-strong: #000000;        /* Hero headings, brand wordmark — pure black for max impact */
  --demo-text: #0b0f14;               /* Primary body, lede, in-card paragraphs — full readable contrast */
  --demo-text-secondary: #374151;     /* Nav inactive, caption-strong — one step below body, never faded */
  --demo-text-muted: #6b7280;         /* Footer license, timestamps, truly tertiary — tightened from #5a6470 */
  --demo-border: rgba(0, 0, 0, 0.08);

  /* ─── Brand: black primary ─── */
  --demo-primary: #000000;
  --demo-primary-fg: #ffffff;
  --demo-primary-hover: #1a1a1a;

  /* ─── Accent: desaturated teal ─── */
  --demo-accent: #41799d;
  --demo-accent-soft: rgba(65, 121, 157, 0.12);
  --demo-accent-hover: #356285;

  /* ─── Semantic ─── */
  --demo-warn: #f59e0b;
  --demo-error: #dc2626;
  --demo-success: #10b981;

  /* ─── Typography ─── */
  --demo-font-sans: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --demo-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Font feature stack — Mailchimp-tier crispness target.
   * cv11   : Inter "single-storey a" (modern, less typewriter feel)
   * ss03   : Inter alt "g" (rounder, more humanist)
   * "tnum" : tabular numerals for code chips and version strings
   * "calt" : contextual alternates (Inter ligatures)
   * Applied on body so every rendered glyph picks them up. */
  --demo-font-features: 'cv11', 'ss03', 'tnum', 'calt';

  /* Weight scale — base 400 reads bold-ish on Inter at 16px; we go 450 for body
   * to land a confident-not-loud body weight, 800 for hero
   * (Mailchimp landing weight), 600 for chrome and CTAs. */
  --demo-fw-regular: 400;
  --demo-fw-body: 450;
  --demo-fw-medium: 500;
  --demo-fw-semibold: 600;
  --demo-fw-bold: 700;
  --demo-fw-display: 800;

  /* Letter-spacing — tighter on display sizes (matches Inter's recommended
   * negative tracking for ≥32px); near-zero on body for legibility. */
  --demo-ls-display: -0.025em;
  --demo-ls-heading: -0.018em;
  --demo-ls-body: -0.005em;
  --demo-ls-caps: 0.04em;

  /* Line-height — tight on display (1.05) for impact, comfortable on body. */
  --demo-lh-display: 1.05;
  --demo-lh-heading: 1.15;
  --demo-lh-body: 1.55;
  --demo-lh-tight: 1.3;

  --demo-fs-xs: 12px;
  --demo-fs-sm: 14px;
  --demo-fs-base: 16px;
  --demo-fs-md: 18px;
  --demo-fs-lg: 20px;
  --demo-fs-xl: 24px;
  --demo-fs-2xl: 32px;
  --demo-fs-3xl: 48px;
  --demo-fs-hero: 64px;

  /* ─── Spacing (4px baseline) ─── */
  --demo-space-1: 4px;
  --demo-space-2: 8px;
  --demo-space-3: 12px;
  --demo-space-4: 16px;
  --demo-space-5: 20px;
  --demo-space-6: 24px;
  --demo-space-7: 32px;
  --demo-space-8: 48px;
  --demo-space-9: 64px;
  --demo-space-10: 96px;

  /* ─── Radius ─── */
  --demo-radius-sm: 4px;
  --demo-radius-md: 8px;
  --demo-radius-lg: 12px;
  --demo-radius-xl: 16px;
  --demo-radius-pill: 999px;

  /* ─── Shadow ─── */
  --demo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --demo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --demo-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);

  /* ─── Chrome dimensions ─── */
  --demo-nav-h: 56px;
  --demo-footer-h: 80px;
  --demo-content-max: 1280px;

  /* ─── Code-highlight palette (Phase F.A.0, light mode) ───────────
   * Maps to Prism.js token classes via assets/css/code-highlight.css.
   * Light = One Light (Atom) inspired. Saturation pulled back ~10 %
   * so the palette reads muted-pro, not candy-rainbow. All main
   * tokens AA-contrast verified vs. --demo-code-syntax-bg
   * (see W6_PHASE_F_CODE_HIGHLIGHT.md §2.4).
   *
   * Used by demo/_partials/design/code-highlight.php's side-by-side
   * "light pair" panel. .demo-code-popover instances pin to the dark
   * twin regardless of page theme (see code-highlight.css) because
   * .demo-code-popover's surface is dark-fixed by W4 legacy.
   */
  --demo-code-syntax-bg:           #fafbfc;
  --demo-code-syntax-fg:           #383a42;
  --demo-code-syntax-comment:      #a0a1a7;
  --demo-code-syntax-keyword:      #a626a4;
  --demo-code-syntax-string:       #50a14f;
  --demo-code-syntax-number:       #986801;
  --demo-code-syntax-builtin:      #d75f00;
  --demo-code-syntax-function:     #4078f2;
  --demo-code-syntax-class-name:   #c18401;
  --demo-code-syntax-property:     #e45649;
  --demo-code-syntax-tag:          #e45649;
  --demo-code-syntax-attr-name:    #986801;
  --demo-code-syntax-attr-value:   #50a14f;
  --demo-code-syntax-operator:     #383a42;
  --demo-code-syntax-punctuation:  #383a42;
  --demo-code-syntax-variable:     #e06c75;
  --demo-code-syntax-deleted:      #e45649;
  --demo-code-syntax-inserted:     #50a14f;
  --demo-code-syntax-selector:     #a626a4;
  --demo-code-syntax-important:    #a626a4;
}

[data-theme='dark'] {
  --demo-bg: #0b0f14;
  --demo-bg-elevated: #11161d;
  --demo-text-strong: #ffffff;
  --demo-text: #e8ecef;
  --demo-text-secondary: #d1d5db;
  --demo-text-muted: #9ca3af;
  --demo-border: rgba(255, 255, 255, 0.08);

  --demo-primary: #ffffff;
  --demo-primary-fg: #000000;
  --demo-primary-hover: #e8ecef;

  --demo-accent: #7ba4c2;
  --demo-accent-soft: rgba(123, 164, 194, 0.18);
  --demo-accent-hover: #9dbed4;

  --demo-warn: #fbbf24;
  --demo-error: #f87171;
  --demo-success: #34d399;

  --demo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --demo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --demo-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);

  /* Code-highlight palette (Phase F.A.0, dark mode) — One Dark Pro
   * inspired. AA-contrast verified vs. dark --demo-code-syntax-bg.
   * Also pinned inside .demo-code-popover regardless of page theme
   * (see code-highlight.css) — popover surface is dark-fixed by W4
   * legacy convention (matches GitHub README / Stripe / Vercel docs).
   */
  --demo-code-syntax-bg:           #1c1f26;
  --demo-code-syntax-fg:           #abb2bf;
  --demo-code-syntax-comment:      #5c6370;
  --demo-code-syntax-keyword:      #c678dd;
  --demo-code-syntax-string:       #98c379;
  --demo-code-syntax-number:       #d19a66;
  --demo-code-syntax-builtin:      #e5c07b;
  --demo-code-syntax-function:     #61afef;
  --demo-code-syntax-class-name:   #e5c07b;
  --demo-code-syntax-property:     #e06c75;
  --demo-code-syntax-tag:          #e06c75;
  --demo-code-syntax-attr-name:    #d19a66;
  --demo-code-syntax-attr-value:   #98c379;
  --demo-code-syntax-operator:     #56b6c2;
  --demo-code-syntax-punctuation:  #abb2bf;
  --demo-code-syntax-variable:     #e06c75;
  --demo-code-syntax-deleted:      #e06c75;
  --demo-code-syntax-inserted:     #98c379;
  --demo-code-syntax-selector:     #c678dd;
  --demo-code-syntax-important:    #c678dd;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}