/**
 * Design tokens: color, type, spacing, easing, shadow.
 *
 * Lighting convention applies only to UI chrome: shadows fall down-right, as
 * if the light source were top-left. The watch dial preview itself stays
 * flat — no shadow, no glow — the render already carries its own lighting;
 * stacking a CSS shadow on top would fight it with a second light source.
 */

:root {
  /* Background and surfaces */
  --bg: #FAFAF9;
  --surface: #F1F4F2;
  --surface-hi: #E8ECE9;

  /* Accent — charcoal + true gold, a premium-jewelry palette. */
  --accent: #1C1917;
  --accent-wash: rgba(28, 25, 23, 0.06);
  --brass: #A16207;
  /* Lighter champagne-gold for text/borders on dark surfaces — --brass itself
     is too dark to read against a near-black background. */
  --brass-light: #D9B36C;

  /* Text */
  --text: #0C0A09;
  --text-dim: #6B6560;

  /* Hairlines */
  --line: #D6D3D1;
  --line-hi: #C4C0BC;

  /* Status. Accent is near-black now, so it no longer doubles as "success" —
     --ok gets its own distinct green. */
  --error: #B3412F;
  --warn: #A16207;
  --ok: #166534;

  /* Fonts. Fraunces for headings, Source Sans 3 for body. System fallback if
     Google Fonts fails to load. */
  --font-display: Fraunces, Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: clamp(80px, 12vh, 140px);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-lg: 600ms;
  --dur-sm: 200ms;
  --reveal-stagger: 80ms;

  /* Shape */
  --radius: 3px;
  --radius-lg: 6px;
  --wrap: 1240px;
  --header-h: 68px;

  /* Shadows for UI cards, offset to match the top-left light source */
  --shadow-sm: 3px 4px 12px rgba(12, 10, 9, 0.10);
  --shadow-md: 8px 12px 32px rgba(12, 10, 9, 0.14);
}

/*
 * Breakpoints used across styles/, noted here since media queries can't read
 * CSS variables:
 *   1080px  collection drops a column
 *    900px  studio single-column, hero shortens, gallery arrows hide
 *    640px  nav becomes a burger drawer, buttons stack full-width
 *    420px  collection down to one column
 */