/* ============================================================
   XESR design tokens — the single source of truth for shared
   visual values. Every page links this file.

   STATUS: PLACEHOLDER. These are deliberately neutral starter
   values. They get replaced when a design direction is locked
   (see "Locked direction" in CLAUDE.md). Until then, direction
   variants MAY override these locally on their own branches —
   but once a direction is approved, its values live here and
   nowhere else.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --color-bg:           #ffffff;
  --color-surface:      #f7f8fa;
  --color-text:         #111827;
  --color-text-muted:   #5b6472;
  --color-accent:       #1f4fd8;   /* placeholder — replace with locked accent */
  --color-accent-ink:   #ffffff;   /* text on accent */
  --color-border:       #e3e6eb;

  /* ---- Type scale (rem) ---- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-hero: 3.75rem;

  /* ---- Spacing rhythm ---- */
  --space-section: 6rem;     /* vertical gap between page sections */
  --space-gutter:  1.5rem;   /* horizontal page padding on mobile */

  /* ---- Shape ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.08);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  450ms;   /* upper bound — nothing animates longer than this */
}

/* Respect users who opt out of motion. Do not remove. */
@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;
  }
}