/* ============================================================
   CROWN & CORE - DESIGN TOKENS
   ============================================================ */

:root {
  /* ---- Color: Paper (light sections) ---- */
  --paper: #F2EFE7;
  --paper-2: #EAE5D7;
  --paper-3: #E2DBC9;

  /* ---- Color: Blue (dark sections) ----
     Every dark-section background uses this one value - no lighter/darker
     siblings - so blue surfaces never drift across the site. */
  --charcoal: #112A38;

  /* ---- Color: Ink & text ---- */
  --ink: #112A38;
  --ink-muted: #55606B;
  --paper-text: #F2EFE7;
  --paper-text-muted: #B7C0C7;

  /* ---- Color: Gold accent family ----
     Brand gold is #AA8952 (hue 35deg). It is only ~2.85:1 on paper, so paper
     surfaces use a deeper sibling for text/links. It is ~4.5:1 on blue, so
     dark surfaces use a lighter sibling instead - both held near the brand
     hue rather than shifting toward brown or yellow. */
  --accent: #AA8952;          /* true brand gold - decorative: rules, step numbers, borders */
  --accent-text: #7A5D33;     /* deep bronze - links/labels on paper (5.3:1, AA) */
  --accent-bright: #C9A874;   /* light gold - accent on blue (>=6.5:1, AAA) */
  --accent-soft: rgba(170, 137, 82, 0.12);
  --accent-rgb: 201, 168, 116; /* accent-bright channels */

  /* ---- Color: Semantic status ----
     Success/danger stay outside the 3-color brand palette so they read as
     status, not brand accent; a gold "success" would be ambiguous. */
  --success: #1F5133;
  --success-soft: rgba(31, 81, 51, 0.10);
  --danger: #B91C1C;
  --danger-soft: rgba(185, 28, 28, 0.10);

  /* ---- Color: Lighter blue ----
     Ambient glows on dark sections stay within the blue family (darker base +
     lighter sibling) rather than mixing in gold, which read muddy at low
     opacity over photos. Same ~201deg hue as --charcoal, lifted in lightness. */
  --charcoal-bright: #3B7CA0;
  --glow-rgb: 59, 124, 160;   /* lighter blue - ambient section glows */

  /* ---- Borders / lines ---- */
  --line: #D9D2C0;
  --line-dark: rgba(242, 239, 231, 0.14);

  /* ---- Semantic ---- */
  --color-bg: var(--paper);
  --color-fg: var(--ink);
  --color-accent: var(--accent-text);
  --focus-ring: #2E6FDA;

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.35rem, 3.2vw + 0.8rem, 1.9rem);
  --fs-xl: clamp(1.7rem, 4vw + 1rem, 2.5rem);
  --fs-2xl: clamp(2rem, 5vw + 1rem, 3.4rem);
  --fs-3xl: clamp(2.3rem, 6vw + 1.1rem, 4.6rem);
  --fs-4xl: clamp(2.5rem, 7vw + 1.1rem, 5.6rem);

  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-body: 1.7;

  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* ---- Spacing scale (4/8pt) ---- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --space-8: 6.4rem;
  --space-9: 9.6rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 2px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 780ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(17, 42, 56, 0.06);
  --shadow-md: 0 8px 30px rgba(17, 42, 56, 0.08);
  --shadow-lg: 0 24px 60px rgba(17, 42, 56, 0.16);
  --shadow-accent: 0 12px 32px rgba(122, 93, 51, 0.24);

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 900;
}