/* ============================================================================
   Sabel's Library — Design Tokens (single source of truth)
   Logo-true palette: navy / gold / cream. Everything themes from here.
   ========================================================================== */

:root {
  /* Palette — logo-true */
  --navy:        #0B1229;   /* primary brand, headers, footer, admin chrome */
  --navy-card:   #151E3F;   /* raised surfaces on navy */
  --gold:        #C8A24B;   /* accents, CTAs, active states, rules/dividers */
  --gold-hover:  #D9B665;
  --cream:       #F5EFE0;   /* light page background */
  --cream-deep:  #EDE4CE;   /* alt section bands */
  --slate:       #7A8B99;   /* secondary text on light, muted UI */
  --ink:         #14181F;   /* body text on cream */
  --text-on-navy:#E9E2CE;

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;   /* headings, brand voice */
  --font-sans:  'Inter', system-ui, sans-serif;          /* body, UI, admin portal */

  /* Layout */
  --max-content: 1120px;
  --radius: 8px;
  --pad: 1.25rem;

  /* Derived tokens (site-level; not brand primitives) */
  --gold-soft:   rgba(200, 162, 75, 0.14);  /* faint gold wash / hover fills */
  --gold-line:   rgba(200, 162, 75, 0.35);  /* hairline dividers on cream */
  --ink-muted:   #4A5560;                    /* secondary text on cream */
  --shadow-sm:   0 1px 2px rgba(11, 18, 41, 0.06), 0 2px 8px rgba(11, 18, 41, 0.05);
  --shadow-md:   0 6px 24px rgba(11, 18, 41, 0.12);
  --shadow-navy: 0 10px 40px rgba(0, 0, 0, 0.35);
  --step: clamp(1rem, 0.6rem + 1.6vw, 1.5rem); /* fluid section rhythm unit */
}