/* ==========================================================================
   Synthetix — Design tokens
   Single source of truth for color, type, space, radius, elevation, motion.
   Motion values follow the Motion Framework Kit token scale.
   ========================================================================== */

:root {
  /* ---- Color: neutrals ------------------------------------------------- */
  --paper: #F7F4EE;          /* warm ivory page */
  --paper-2: #efeee9;        /* recessed surfaces */
  --paper-3: #e6e4dd;
  --white: #ffffff;
  --ink: #0b0b0e;            /* near-black text */
  --ink-2: #26262c;
  --graphite: #55555d;       /* secondary text (AA on paper) */
  --mute: #6c6c74;           /* tertiary text (AA on paper) */
  --line: rgba(11, 11, 14, 0.09);
  --line-strong: rgba(11, 11, 14, 0.16);

  /* ---- Color: night (product + dark sections) ------------------------- */
  --night: #263D32;          /* deep forest green (logo) */
  --night-2: #2B4337;
  --night-3: #31493D;
  --night-4: #3A5446;
  --night-text: #F7F4EE;
  --night-text-2: #C5D1C2;
  --night-text-3: #A6B7A3;
  --night-line: rgba(255, 255, 255, 0.08);
  --night-line-strong: rgba(255, 255, 255, 0.14);

  /* ---- Color: brand (used strategically) ------------------------------ */
  --blue: #263D32;           /* deep forest green (primary) */
  --blue-ink: #263D32;       /* primary for text on light (AA) */
  --blue-soft: #B8C9B5;      /* muted sage — primary on dark */
  --violet: #263D32;
  --violet-soft: #DDA18C;    /* soft terracotta — accent on dark */
  --brand-grad: linear-gradient(100deg, #B8C9B5 0%, #DDA18C 100%);
  --signal: #2fbf71;         /* live / success */
  --signal-soft: #6fe0a4;
  --amber: #f0a43a;          /* attention */

  /* ---- Typography ----------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: var(--font-sans); /* nav + menus */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --fs-display: clamp(2.6rem, 1rem + 6.9vw, 7.25rem);
  --fs-h1: clamp(2.4rem, 1.2rem + 4.6vw, 5.25rem);
  --fs-h2: clamp(2rem, 1.25rem + 2.9vw, 3.75rem);
  --fs-h3: clamp(1.3rem, 1.12rem + 0.6vw, 1.7rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.1rem, 1rem + 0.42vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.02;
  --lh-heading: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --tracking-display: -0.045em;
  --tracking-heading: -0.035em;
  --tracking-snug: -0.015em;
  --tracking-label: 0.08em;

  /* ---- Space (4px base) ---------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --section-y: clamp(4.5rem, 3rem + 5vw, 8rem);
  --section-y-sm: clamp(3rem, 2.25rem + 3vw, 5rem);

  /* ---- Layout -------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  --nav-h: 72px;
  --nav-h-compact: 56px;

  /* ---- Radius (restrained) ------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Elevation ----------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(11, 11, 14, 0.06), 0 1px 1px rgba(11, 11, 14, 0.04);
  --shadow-2: 0 8px 24px -12px rgba(11, 11, 14, 0.18), 0 2px 6px -2px rgba(11, 11, 14, 0.06);
  --shadow-3: 0 40px 80px -40px rgba(11, 11, 14, 0.45), 0 18px 36px -18px rgba(11, 11, 14, 0.25);
  --shadow-product: 0 60px 120px -50px rgba(38, 61, 50, 0.55), 0 24px 48px -24px rgba(11, 11, 14, 0.35),
    0 0 0 1px rgba(11, 11, 14, 0.08);

  /* ---- Motion (Motion Framework Kit scale) --------------------------- */
  --dur-xs: 120ms;   /* tap feedback */
  --dur-sm: 200ms;   /* hover, focus */
  --dur-md: 300ms;   /* small state changes */
  --dur-lg: 450ms;   /* item entrances */
  --dur-xl: 700ms;   /* headline / section entrances */
  --dur-2xl: 1000ms; /* large reveals */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.43, 0.13, 0.23, 0.96);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --stagger: 70ms;
  --reveal-distance: 22px;
  --hover-scale: 1.02;
  --tap-scale: 0.98;

  /* ---- Breakpoints (reference — media queries can't read vars) -------
     sm 560px · md 768px · lg 1024px · xl 1280px                         */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-xs: 0ms;
    --dur-sm: 0ms;
    --dur-md: 0ms;
    --dur-lg: 0ms;
    --dur-xl: 0ms;
    --dur-2xl: 0ms;
    --stagger: 0ms;
    --reveal-distance: 0px;
    --hover-scale: 1;
    --tap-scale: 1;
  }
}