/* ============================================
   BLUE OAK WEB DESIGN — Design Tokens
   Edit these variables to change the entire site
   ============================================ */

:root {
  /* ---- Brand Colors ---- */
  --oak:          #1B2E4A; /* dark navy blue — main brand color */
  --oak-light:    #2A4A72; /* lighter navy — hover states */
  --oak-dark:     #111F33; 
  --sky:          #4A90B8; /* blue — accent color */
  --sky-light:    #6DB5D9; /* lighter blue */
  --cream:        #F5F0E8; /* warm off-white — backgrounds */
  --cream-dark:   #E8E0D2; /* darker cream — borders */
  --gold:         #C8973E; /* gold — labels, highlights */
  --gold-light:   #E0B55F; /* lighter gold */
  --white:        #FEFCF9; /* warm white */
  --charcoal:     #2A2A2A; /* footer background */

  /* ---- Text Colors ---- */
  --text:         #3D3D3D;
  --text-light:   #6B6B6B;
  --text-muted:   #9A9A9A;

  /* ---- Typography ---- */
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body:    'Outfit', -apple-system, sans-serif;

  /* ---- Spacing Scale (multiples of 4) ---- */
  --space-xs:     4px;
  --space-sm:     8px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-2xl:    48px;
  --space-3xl:    64px;
  --space-4xl:    100px;

  /* ---- Border Radius ---- */
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    20px;
  --radius-full:  50px;

  /* ---- Shadows ---- */
  --shadow-sm:    0 2px 8px rgba(27,58,45,0.05);
  --shadow:       0 4px 24px rgba(27,58,45,0.08);
  --shadow-lg:    0 12px 48px rgba(27,58,45,0.12);
  --shadow-xl:    0 20px 60px rgba(27,58,45,0.16);

  /* ---- Transitions ---- */
  --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition:   0.3s var(--ease-out);

  /* ---- Layout ---- */
  --max-width:    1280px;
  --nav-height:   72px;
}