/* ==========================================================================
   Design Tokens — OptimaEd Brand
   ========================================================================== */

:root {
  /* --- Brand Colors --- */
  --color-binary-blue:    #0E1C42;
  --color-bitstream-blue: #55C8E8;
  --color-portal-purple:  #67308F;
  --color-pixel-pink:     #A53E97;
  --color-gamer-green:    #76C043;
  --color-odyssey-orange: #F78F1E;

  /* --- Semantic Aliases --- */
  --color-primary:        var(--color-binary-blue);
  --color-primary-light:  #162554;
  --color-accent:         var(--color-bitstream-blue);
  --color-accent-dark:    #3BA8C8;
  --color-secondary:      var(--color-portal-purple);
  --color-secondary-light:#7E4BA6;
  --color-pink:           var(--color-pixel-pink);
  --color-green:          var(--color-gamer-green);
  --color-orange:         var(--color-odyssey-orange);

  --color-surface:        #f8f9fc;
  --color-surface-alt:    #eef0f7;
  --color-white:          #ffffff;

  /* Font colors per Brand Guide */
  --color-text:           #000000;           /* Primary text: Black */
  --color-text-secondary: var(--color-binary-blue); /* Secondary text: Binary Blue */
  --color-text-tertiary:  #0E5568;           /* Tertiary text: Dark Bitstream Blue */
  --color-text-muted:     #5a5a7a;
  --color-text-on-dark:   #e8eaf0;
  --color-text-on-dark-muted: #a0a8c0;

  /* --- Gradients --- */
  --gradient-hero:        linear-gradient(135deg, var(--color-binary-blue) 0%, var(--color-portal-purple) 100%);
  --gradient-accent:      linear-gradient(135deg, var(--color-bitstream-blue) 0%, var(--color-pixel-pink) 100%);
  --gradient-warm:        linear-gradient(135deg, var(--color-odyssey-orange) 0%, var(--color-pixel-pink) 100%);
  --gradient-card-border: linear-gradient(135deg, var(--color-bitstream-blue), var(--color-portal-purple));

  /* --- Typography (per Brand Guide) --- */
  /* Primary: Wix Madefor Display — headlines, titles, CTAs */
  /* Secondary: Wix Madefor Text — body, captions, quotes */
  --font-heading: 'Wix Madefor Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Wix Madefor Text', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;     /* ~12px - captions */
  --text-sm:   0.875rem;    /* ~14px - subheadings/CTA min */
  --text-base: 1rem;        /* 16px - body max */
  --text-lg:   1.125rem;    /* 18px - quotes/CTA max */
  --text-xl:   1.25rem;     /* 20px - subheadings */
  --text-2xl:  1.375rem;    /* 22px - subheadings max */
  --text-3xl:  1.625rem;    /* 26px - headline min */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* --- 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:        1200px;
  --max-width-narrow: 800px;
  --max-width-wide:   1400px;
  --border-radius:    8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 3px rgba(14, 28, 66, 0.08);
  --shadow-md:   0 4px 12px rgba(14, 28, 66, 0.12);
  --shadow-lg:   0 8px 30px rgba(14, 28, 66, 0.16);
  --shadow-xl:   0 16px 50px rgba(14, 28, 66, 0.2);
  --shadow-glow: 0 0 20px rgba(85, 200, 232, 0.2);
  --shadow-glow-purple: 0 0 20px rgba(103, 48, 143, 0.2);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Nav --- */
  --nav-height: 72px;
}