/* ============================================================
   DESIGN TOKENS — Navy & White Theme
   To switch themes, edit ONLY this file.
   ============================================================ */

:root {
  /* Colors — from palette: slate blue, blush beige, warm tan, deep navy */
  --color-bg:           #ffffff;   /* white — dominant */
  --color-surface:      #f7f9fb;   /* very light blue-white */
  --color-primary:      #607b9b;   /* slate blue */
  --color-primary-dark: #4c6480;   /* deeper slate */
  --color-accent:       #b08868;   /* warm tan */
  --color-accent-dark:  #8f6a4d;   /* deeper tan */
  --color-blush:        #dfc9b6;   /* blush beige */
  --color-blush-light:  #ede0d4;   /* light blush */
  --color-text:         #1b2540;   /* deep navy */
  --color-text-muted:   #607b9b;   /* slate blue as muted text */
  --color-text-light:   #ffffff;
  --color-divider:      #dde4ee;   /* light blue-grey */
  --color-overlay:      rgba(139, 109, 56, 0.28); /* golden overlay */

  /* Typography */
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-script:  'Luxurious Script', cursive;
  --font-body:    'Jost', system-ui, sans-serif;

  /* Font sizes — fluid mobile-first */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-4xl:   4rem;
  --text-hero:  clamp(3rem, 12vw, 7rem);
  --text-script-hero: clamp(4rem, 16vw, 10rem);

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Layout */
  --max-width:       1100px;
  --max-width-prose: 680px;
  --nav-height:      70px;

  /* Borders & Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;
  --border-thin: 1px solid var(--color-divider);
  --border-accent: 1px solid var(--color-primary);

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(27, 37, 64, 0.08);
  --shadow-md:  0 4px 16px rgba(27, 37, 64, 0.12);
  --shadow-lg:  0 8px 32px rgba(27, 37, 64, 0.16);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;
}

/* ============================================================
   ALTERNATE THEME EXAMPLES (commented out — swap to activate)

   Moody & Dramatic:
   --color-bg: #1a1520;
   --color-surface: #221d2a;
   --color-primary: #c9a882;
   --color-accent: #7b6e9a;
   --color-text: #f0ebe4;

   Modern & Minimal:
   --color-bg: #f8f8f6;
   --color-primary: #2d2d2d;
   --color-accent: #c0a98a;
   --font-serif: 'Cormorant Garamond', Georgia, serif;
   ============================================================ */