/*
 * Mandate D2.1 — the design system, verbatim from the spec.
 *
 *   Type   12 / 14 / 16 / 20 / 24 / 32 / 48 / 64, clamp() for 32+
 *   Space  4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96
 *   Radius 12 / 18 / 28 / 999px
 *   Shadow sm / md / lg — soft neutral, never neon glow
 *   Color  semantic light/dark variables; brand emerald/green + ink/surface/muted + pos/warn/neg
 *   Max content width 1200px; text measure 68ch
 *
 * Every value below is a token. Pages and components consume tokens only, so a change here is a change
 * everywhere — the web-side equivalent of the app's MotionTokens.
 */

:root {
  color-scheme: light dark;

  /* ── Type scale. clamp() from 32 up, so a phone never renders a 64px headline. */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);
  --fs-48: clamp(1.875rem, 1.15rem + 3.2vw, 3rem);
  --fs-64: clamp(2.25rem, 1.1rem + 5.1vw, 4rem);

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-body: 1.6;

  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  /* Money and figures use tabular numerals so columns align, exactly as the app does. */
  --ff-numeric: var(--ff-sans);
  --fv-tabular: "tnum" 1;

  /* ── Space scale */
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-96: 6rem;

  /* ── Radius */
  --r-12: 12px;
  --r-18: 18px;
  --r-28: 28px;
  --r-full: 999px;

  /* ── Layout */
  --content-max: 1200px;
  --measure: 68ch;

  /* ── Brand + semantic color (light). The app's emerald, matched. */
  --brand-600: #0a7f5f;
  --brand-500: #12946e;
  --brand-400: #1e9e6a;
  --brand-300: #34c79a;
  --teal-500: #0f8a8a;

  --ink: #14161a;
  --ink-2: #3d434d;
  --muted: #5a616c;
  --faint: #767d88;

  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --page: #fafafb;
  --line: #e3e5ea;

  --positive: #147a32;
  --warning: #9a6200;
  --negative: #c5221f;

  --on-brand: #ffffff;
  --focus: #0a7f5f;
  --chip: rgba(10, 127, 95, 0.1);

  /* ── Shadow: soft neutral. Never a colored glow. */
  --shadow-sm: 0 1px 2px rgba(16, 20, 26, 0.06), 0 1px 1px rgba(16, 20, 26, 0.04);
  --shadow-md: 0 6px 16px rgba(16, 20, 26, 0.08), 0 2px 4px rgba(16, 20, 26, 0.04);
  --shadow-lg: 0 24px 60px rgba(16, 20, 26, 0.12), 0 6px 16px rgba(16, 20, 26, 0.06);

  /* ── Restrained emerald→teal mesh, used ONLY behind product proof (D2.1). */
  --mesh-a: rgba(10, 127, 95, 0.30);
  --mesh-b: rgba(15, 138, 138, 0.26);
  --mesh-c: rgba(52, 199, 154, 0.22);

  /* ── Motion, mirroring the app's D1.1 tokens so the two surfaces feel like one product. */
  --dur-fast: 120ms;
  --dur-standard: 220ms;
  --dur-emphasized: 320ms;
  --dur-hero: 480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* Written by js/motion.js; declared here so first paint never reads an undefined var (CLS = 0). */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --parallax: 0px;
}

/* ── Dark, by preference or by explicit toggle. Both paths set the same tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f3f4f6;
    --ink-2: #c9ced6;
    --muted: #a2a9b4;
    --faint: #858c97;

    --surface: #16181c;
    --surface-2: #1e2126;
    --page: #0d0f12;
    --line: #2a2e35;

    --brand-600: #34c79a;
    --brand-500: #2bb98d;
    --brand-400: #23a87f;

    --positive: #3ec26a;
    --warning: #e0a83a;
    --negative: #ff6b5e;

    --on-brand: #06231a;
    --focus: #34c79a;
    --chip: rgba(52, 199, 154, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

    --mesh-a: rgba(52, 199, 154, 0.24);
    --mesh-b: rgba(15, 138, 138, 0.22);
    --mesh-c: rgba(10, 127, 95, 0.20);
  }
}

:root[data-theme="dark"] {
  --ink: #f3f4f6;
  --ink-2: #c9ced6;
  --muted: #a2a9b4;
  --faint: #858c97;

  --surface: #16181c;
  --surface-2: #1e2126;
  --page: #0d0f12;
  --line: #2a2e35;

  --brand-600: #34c79a;
  --brand-500: #2bb98d;
  --brand-400: #23a87f;

  --positive: #3ec26a;
  --warning: #e0a83a;
  --negative: #ff6b5e;

  --on-brand: #06231a;
  --focus: #34c79a;
  --chip: rgba(52, 199, 154, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  --mesh-a: rgba(52, 199, 154, 0.14);
  --mesh-b: rgba(15, 138, 138, 0.12);
  --mesh-c: rgba(10, 127, 95, 0.12);
}