/* =============================================
   VARIABLES.CSS — Casper and Saint
   Design Tokens
   ============================================= */

:root {
  /* Brand Colors */
  --navy:        #0D1B3E;
  --navy-mid:    #122256;
  --navy-light:  #1A3378;
  --blue:        #1C4BA8;
  --blue-light:  #2B66D1;
  --gold:        #C9A84C;
  --gold-light:  #E2C168;
  --white:       #FFFFFF;
  --off-white:   #F5F6FA;
  --light-grey:  #E8EAF2;
  --mid-grey:    #8A90A8;
  --text-dark:   #0D1B3E;
  --text-body:   #2C3351;
  --text-muted:  #6B7293;

  /* Typography */
  --font-display:  'Bebas Neue', 'Impact', sans-serif;
  --font-serif:    'Cormorant Garamond', Georgia, serif;
  --font-body:     'Montserrat', 'Helvetica Neue', sans-serif;

  /* Spacing Scale */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  8rem;

  /* Container */
  --container-max: 1200px;
  --container-pad: 1.5rem;

  /* Border Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(13, 27, 62, 0.08);
  --shadow-md:  0 8px 32px rgba(13, 27, 62, 0.14);
  --shadow-lg:  0 20px 60px rgba(13, 27, 62, 0.22);
  --shadow-glow: 0 0 40px rgba(28, 75, 168, 0.3);

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   180ms;
  --duration-mid:    320ms;
  --duration-slow:   600ms;

  /* Navbar height */
  --nav-height: 76px;
}

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
    --space-xl:   2.5rem;
    --space-2xl:  4rem;
    --space-3xl:  5rem;
  }
}