/* ============================================================
   WOW THEME — DESIGN TOKENS
   All brand values live here. Edit this file to update the
   entire site's look and feel from one place.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BRAND COLORS — SOLIDS
  ---------------------------------------------------------- */
  --color-navy:        #042a5d;   /* Primary dark — text, dark bg */
  --color-white:       #ffffff;
  --color-navy-80:     rgba(4, 42, 93, 0.80);
  --color-navy-60:     rgba(4, 42, 93, 0.60);
  --color-navy-20:     rgba(4, 42, 93, 0.20);
  --color-white-80:    rgba(255, 255, 255, 0.80);
  --color-white-20:    rgba(255, 255, 255, 0.20);

  /* ----------------------------------------------------------
     BRAND COLORS — GRADIENTS
     All gradients run at 135deg unless noted.
  ---------------------------------------------------------- */
  --grad-primary:      linear-gradient(135deg, #94b9ff, #cdffd8);   /* Teal-blue — primary */
  --grad-yellow-pink:  linear-gradient(135deg, #fff7ad, #ffa9f9);   /* Yellow-pink */
  --grad-gold-orange:  linear-gradient(135deg, #fae9a2, #ff9a5b);   /* Gold-orange */
  --grad-blue-cyan:    linear-gradient(135deg, #6a8aff, #b2fbff);   /* Blue-cyan */
  --grad-coral-peach:  linear-gradient(135deg, #ff7c90, #ffe1a4);   /* Coral-peach */
  --grad-blue-lavender:linear-gradient(135deg, #94b9ff, #e894ff);   /* Blue-lavender */
  --grad-sunshine:     radial-gradient(circle at 60% 40%, #fff1b2, #ffe77d); /* Sunshine yellow */
  --color-sunshine-text: #667e9d; /* Text color for sunshine button */

  /* Gradient stop values (useful for SVG, canvas, or JS) */
  --grad-primary-from: #94b9ff;
  --grad-primary-to:   #cdffd8;

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-primary:   'Montserrat', sans-serif;
  --font-script:    'Freehand', cursive;

  /* Scale */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */
  --text-5xl:   3rem;       /*  48px */
  --text-6xl:   3.75rem;    /*  60px */
  --text-7xl:   4.5rem;     /*  72px */

  /* ----------------------------------------------------------
     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;

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   15px;   /* WOW card radius */
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
     Soft drop shadows for white cards over gradient backgrounds
  ---------------------------------------------------------- */
  --shadow-card:   0 4px 24px rgba(4, 42, 93, 0.10),
                   0 1px 4px  rgba(4, 42, 93, 0.06);
  --shadow-card-hover: 0 8px 40px rgba(4, 42, 93, 0.15),
                       0 2px 8px  rgba(4, 42, 93, 0.08);
  --shadow-nav:    0 2px 16px rgba(4, 42, 93, 0.08);
  --shadow-modal:  0 24px 80px rgba(4, 42, 93, 0.25);

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --container-max:   1200px;
  --container-wide:  1400px;
  --container-narrow: 760px;
  --nav-height:      112px;

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-page:   300ms ease;

  /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
}