/* ==========================================================================
   Northern Page — Design Tokens
   Palette anchored to the wordmark navy, with a muted brass/gold accent
   that complements the photography (lamp, gold ink, compass).
   ========================================================================== */

:root {
  /* -- Color: navy (brand primary, from logo) -- */
  --navy-950: #0a0f1c;
  --navy-900: #12203b;
  --navy-850: #172a4a;
  --navy-800: #1c2e4e;
  --navy-700: #2c3f63;
  --navy-600: #435577;

  /* -- Color: neutrals -- */
  --ink: #10182b;
  --slate-600: #55607a;
  --slate-400: #8b93a6;
  --slate-300: #b7bdca;
  --slate-200: #ddd3bd;
  --slate-100: #edeef2;
  --paper: #efe7d6;
  --paper-dim: #e3d7bd;
  --white: #ffffff;

  /* -- Color: accent (muted brass/gold) -- */
  --gold: #c6a15b;
  --gold-deep: #96762f;
  --gold-tint: rgba(198, 161, 91, 0.14);

  /* -- Color: semantic -- */
  --bg-page: var(--paper);
  --bg-surface: var(--white);
  --bg-dark: var(--navy-900);
  --text-body: var(--ink);
  --text-muted: var(--slate-600);
  --text-on-dark: var(--paper);
  --text-on-dark-muted: var(--slate-300);
  --border-subtle: var(--slate-200);
  --border-on-dark: rgba(246, 244, 239, 0.16);
  --focus-ring: var(--gold-deep);

  /* -- Type -- */
  --font-display: 'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-900: clamp(2.75rem, 2.1rem + 3vw, 5.25rem);
  --fs-800: clamp(2.1rem, 1.7rem + 1.8vw, 3.4rem);
  --fs-700: clamp(1.5rem, 1.3rem + 0.9vw, 2.15rem);
  --fs-600: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: 0.9rem;
  --fs-200: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  /* -- Space -- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  /* -- Layout -- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 84px;

  /* -- Radius -- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* -- Shadow (navy-tinted for warmth) -- */
  --shadow-sm: 0 1px 2px rgba(10, 15, 28, 0.06), 0 1px 1px rgba(10, 15, 28, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(10, 15, 28, 0.18);
  --shadow-lg: 0 24px 60px -16px rgba(10, 15, 28, 0.28);

  /* -- Motion -- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-slower: 1100ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}