/* ============================================================================
 * tokens.css — Design-token contract
 * ----------------------------------------------------------------------------
 * Single source of truth for colors, type scale, spacing, radii, shadows,
 * motion, and layout widths. Reference: design.md.
 *
 * Two-layer model:
 *   1. Brand palette   — raw hex values exposed as --brand-* tokens.
 *   2. Semantic layer  — meaning-named aliases (--color-bg, --color-accent,
 *                        etc.) that all other stylesheets MUST consume.
 *
 * To retheme the site, only the Brand palette block needs to change.
 * ========================================================================== */

:root {
  /* === Brand palette =====================================================
   * Raw colors. Do not consume these directly from component CSS —
   * use the semantic --color-* aliases below.
   * --------------------------------------------------------------------- */
  --brand-bg-primary: #0B1F3A;     /* Main page background */
  --brand-bg-secondary: #163C6A;   /* Elevated surfaces, gradients */
  --brand-accent: #C9A84C;         /* Primary accent (gold) */
  --brand-accent-hover: #E0C070;   /* Accent hover state */
  --brand-text-primary: #F0E8D8;   /* Body copy */
  --brand-text-muted: #7A9AAE;     /* Secondary / muted copy */
  --brand-surface: #0C1520;        /* Cards, panels */
  --brand-white: #FFFFFF;          /* High-contrast titles */

  /* === Semantic colors ===================================================
   * All component CSS reads these. Borders are alpha-on-accent so they
   * track palette changes automatically.
   * --------------------------------------------------------------------- */
  --color-bg: var(--brand-bg-primary);
  --color-bg-elev: var(--brand-bg-secondary);
  --color-surface: var(--brand-surface);
  --color-text: var(--brand-text-primary);
  --color-text-muted: var(--brand-text-muted);
  --color-accent: var(--brand-accent);
  --color-accent-hover: var(--brand-accent-hover);
  --color-white: var(--brand-white);
  --color-border: rgba(201, 168, 76, 0.18);
  --color-border-strong: rgba(201, 168, 76, 0.4);

  /* === Typography ========================================================
   * Inter for UI, Cormorant Garamond for display headings.
   * --------------------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.55;

  /* === Spacing scale (4pt grid) ==========================================
   * Step name = rem*16. e.g. --s-4 = 1rem = 16px.
   * --------------------------------------------------------------------- */
  --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;

  /* === Radius ============================================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* === Shadow ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* === Motion ============================================================ */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* === Layout ============================================================ */
  --container: 1200px;
  --container-narrow: 880px;
}