/*
 * Vesper design tokens: the single source of truth (ADR-0005).
 * Twilight palette, serif display + system sans, calm motion. Components in
 * ui.css consume these variables only; no component should hardcode a raw hex,
 * px brand value, or rgba(). Reach for a token, or color-mix() over one.
 */

:root {
  /* --- Palette: the raw twilight scale (referenced via semantic tokens below) */
  --night-900: #0a0e22; /* page background */
  --night-800: #111634; /* raised surfaces, inputs */
  --night-700: #1a2050;
  --dusk-600:  #2b3170;
  --violet-400: #8088cc; /* eyebrows, quiet accents */
  --star:  #cdd4f4;      /* primary text on dark */
  --mist:  #a7aed4;      /* muted text on dark */
  --heading-ink: #fbfcff;
  --amber: #e7b26c;      /* primary accent / CTAs */
  --amber-strong: #d89a47;
  --ember: #cf8064;      /* secondary warm accent */
  --parchment: #f6f1e7;  /* light surface (rare; e.g. printed/keepsake) */
  --ink: #191b2b;        /* text on a light surface */
  --ink-soft: #50536b;
  --accent-ink: #2a1c08; /* text that sits on the amber accent */
  --tint-light: #fff;    /* color-mix endpoint for lightening a token */
  --tint-dark: #000;     /* color-mix endpoint for darkening a token */

  /* --- Semantic tokens: what components actually reference */
  --color-bg: var(--night-900);
  --color-surface: rgb(255 255 255 / 4%);
  --color-surface-raised: var(--night-800);
  --color-text: var(--star);
  --color-text-muted: var(--mist);
  --color-heading: var(--heading-ink);
  --color-eyebrow: var(--violet-400);
  --color-accent: var(--amber);
  --color-accent-strong: var(--amber-strong);
  --color-accent-ink: var(--accent-ink);
  --color-danger: var(--ember); /* error/destructive, distinct from orientation use of --ember */
  --color-border: rgb(205 212 244 / 14%);
  --color-border-strong: rgb(205 212 244 / 30%);
  --color-focus: var(--amber);

  /* --- Typography */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --weight-regular: 400;
  --weight-semibold: 600;
  --text-xs: 0.75rem;    /* 12: eyebrows, hints */
  --text-sm: 0.8125rem;  /* 13: micro, captions */
  --text-base: 1rem;     /* 16: body */
  --text-md: 1.0625rem;  /* 17: lede */
  --text-lg: 1.1875rem;  /* 19: large body */
  --text-xl: 1.625rem;   /* 26: section headings */
  --text-2xl: 1.875rem;  /* 30: page headings */
  --text-display: clamp(34px, 6vw, 58px); /* hero */
  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-eyebrow: 0.22em;

  /* --- Space scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- Radii */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* --- Elevation (tuned for the dark theme) + accent glow */
  --shadow-sm: 0 8px 22px rgb(0 0 0 / 40%);
  --shadow: 0 16px 34px rgb(0 0 0 / 50%);
  --shadow-lg: 0 30px 60px -28px rgb(0 0 0 / 80%);
  --glow-amber: 0 0 12px 2px color-mix(in srgb, var(--amber) 70%, transparent);

  /* --- Layout */
  --container: 1080px;
  --container-narrow: 640px;

  /* --- Motion (zeroed under prefers-reduced-motion below) */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}