/* TestDossier — Foundation tokens. Single source of truth shared by the app,
   marketing, share renderer, diff viewer, and (reconciled) the extension.
   See docs/DESIGN-SYSTEM.md.

   ADDITIVE + NON-BREAKING: every legacy token the app or marketing.css already
   ships is preserved as an alias to the canonical value, so linking this file
   changes zero rendering. Off-grid magic numbers are retired per-page during
   migration, not here.

   NOTE: not yet linked into any page (Phase 0). */

:root {
  /* ── Spacing — 4px grid, one canonical scale ───────────────────────────── */
  --space-0: 0;
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;
  /* marketing alias family (identical values) */
  --s-1: var(--space-1);   --s-2: var(--space-2);   --s-3: var(--space-3);
  --s-4: var(--space-4);   --s-5: var(--space-5);   --s-6: var(--space-6);
  --s-8: var(--space-8);   --s-10: var(--space-10); --s-12: var(--space-12);
  --s-16: var(--space-16); --s-20: var(--space-20); --s-24: var(--space-24);
  --s-32: var(--space-32);

  /* ── Radius — three semantic roles + legacy aliases ────────────────────── */
  --radius-control: 8px;  /* buttons, inputs, selects, square chips */
  --radius-card: 12px;    /* canvas surfaces, panels, modals */
  --radius-pill: 999px;   /* pills, toggles, avatars */
  /* legacy aliases (app + marketing) */
  --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px;
  --r-sm: 4px; --r: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  /* App UI ramp — denser than marketing by design (a tool, not a page). */
  --text-ui-xs: 11px; --text-ui-sm: 12px; --text-ui-base: 13px; --text-ui: 14px;
  /* Shared display scale — matches marketing.css verbatim. */
  --text-xs: 12px;  --text-sm: 13px;  --text-base: 15px; --text-md: 16px;
  --text-lg: 18px;  --text-xl: 20px;  --text-2xl: 24px;  --text-3xl: 32px;
  --text-4xl: 40px; --text-5xl: 56px; --text-6xl: 64px;
  /* Line heights */
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.5; --lh-loose: 1.7;
  /* Faces (mirror the inline app + marketing definitions) */
  --font-sans: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --feat: "cv02", "cv03", "cv04", "cv11", "ss01";

  /* ── Weights ───────────────────────────────────────────────────────────── */
  --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ── Motion — shared timing so transitions match across surfaces. The app
        inline styles hardcode 0.12s; marketing uses these names. Defining them
        here lets both consume one easing/duration. ─────────────────────────── */
  --t-fast: 120ms; --t-base: 180ms; --t-slow: 240ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Cross-surface color names the app lacked (light) ──────────────────── */
  /* Core palette already aligned app↔marketing; only the gaps are added here. */
  --surface-3: #eaecef;
  --text-4: #9aa0aa;
  --accent-active: #2e22a8;
  --accent-ring: rgba(68, 53, 232, 0.22);

  /* ── Elevation — ramp aliases (xs..lg) ─────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgba(15, 20, 25, 0.04);
  /* --shadow-sm / --shadow / --shadow-md / --shadow-lg are defined inline by the
     app and by marketing.css with matching ramps; left untouched here. */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-3: #1c2030;
    --text-4: #535a69;
    --accent-active: #9d92ff;
    --accent-ring: rgba(110, 95, 230, 0.30);
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  }
}
[data-theme="dark"] {
  --surface-3: #1e2430;
  --text-4: #5f6675;
  --accent-active: #c2bbff;
  --accent-ring: rgba(147, 136, 255, 0.30);
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}