/*
 * ═══════════════════════════════════════════════════════════
 * TECTRANZ DESIGN TOKENS — WordPress / Elementor Version
 * Single source of truth for ALL design decisions.
 * Brand: Electric Blue #2300E8 · Growth Green #1BA050 · Navy #0D1B4B
 * ═══════════════════════════════════════════════════════════
 */

:root {
  /* ── Brand Colors ───────────────────────────────────────── */
  --c-blue:          #2300E8;   /* Electric Blue — CTAs, logo, links */
  --c-blue-dark:     #1800B0;   /* Hover state */
  --c-blue-deeper:   #0F0080;   /* Deep press state */
  --c-blue-mid:      #4D35F0;   /* Gradient accent */
  --c-blue-light:    #EEF0FF;   /* Light fills, card BGs */
  --c-blue-tint:     #F4F6FF;   /* Ultra-light tint */

  --c-green:         #1BA050;   /* Growth Green — success, stats */
  --c-green-dark:    #137A3C;   /* Hover on green */
  --c-green-vivid:   #20C460;   /* Hero accents, vivid stat numbers */
  --c-green-light:   #E8F7EE;   /* Green tint backgrounds */
  --c-green-lt:      #6FEF9C;   /* Light green on DARK backgrounds only */

  --c-navy:          #0D1B4B;   /* Anchor dark — hero, dark sections */
  --c-navy-mid:      #162566;   /* Mid navy — gradient stops */
  --c-navy-light:    #1E3280;   /* Lighter navy — hover states */

  /* ── Neutrals ───────────────────────────────────────────── */
  --c-white:         #FFFFFF;
  --c-off-white:     #F8F9FC;
  --c-gray-50:       #F4F6FF;
  --c-gray-100:      #E8ECF4;
  --c-gray-200:      #D1D9E8;
  --c-gray-300:      #B0BBC8;
  --c-gray-400:      #8896A8;
  --c-gray-500:      #64748B;
  --c-gray-600:      #4A5568;
  --c-gray-700:      #334155;
  --c-gray-800:      #1E293B;
  --c-gray-900:      #0F172A;

  /* ── Semantic ───────────────────────────────────────────── */
  --c-bg:            #FFFFFF;
  --c-bg-alt:        #F8F9FC;
  --c-bg-tint:       #F4F6FF;
  --c-bg-dark:       #0D1B4B;
  --c-bg-card:       #FFFFFF;
  --c-bg-card-alt:   #F4F6FF;

  --c-text:          #1E293B;
  --c-text-muted:    #64748B;
  --c-text-subtle:   #8896A8;
  --c-text-inverse:  #FFFFFF;
  --c-text-on-blue:  #FFFFFF;
  --c-text-on-navy:  #FFFFFF;

  --c-border:        #E8ECF4;
  --c-border2:       #D1D9E8;
  --c-border-strong: #D1D9E8;
  --c-border-focus:  #2300E8;
  --c-border-blue:   rgba(35, 0, 232, 0.2);

  --c-success:       #1BA050;
  --c-success-bg:    #E8F7EE;
  --c-warning:       #F59E0B;
  --c-warning-bg:    #FEF3C7;
  --c-error:         #EF4444;
  --c-error-bg:      #FEE2E2;

  /* ── Gradients ──────────────────────────────────────────── */
  --g-hero:
    radial-gradient(ellipse at 15% 50%, rgba(35,0,232,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(27,160,80,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(77,53,240,0.12) 0%, transparent 45%),
    linear-gradient(145deg, #0D1B4B 0%, #162566 50%, #1800B0 100%);

  --g-mesh:
    radial-gradient(ellipse at 20% 50%, rgba(35,0,232,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(27,160,80,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(77,53,240,0.10) 0%, transparent 40%),
    linear-gradient(135deg, #0D1B4B 0%, #162566 100%);

  --g-blue:          linear-gradient(135deg, #2300E8 0%, #4D35F0 100%);
  --g-blue-dark:     linear-gradient(135deg, #1800B0 0%, #2300E8 100%);
  --g-blue-light:    linear-gradient(135deg, #EEF0FF 0%, #F4F6FF 100%);
  --g-green:         linear-gradient(135deg, #1BA050 0%, #137A3C 100%);
  --g-green-light:   linear-gradient(135deg, #E8F7EE 0%, #F0FBF4 100%);
  --g-light:         linear-gradient(135deg, #F4F6FF 0%, #EEF0FF 100%);
  --g-card:          linear-gradient(145deg, #FFFFFF 0%, #F8F9FC 100%);
  --g-dark-card:     linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);

  /* Program card gradients */
  --g-prog-1:  linear-gradient(135deg, #0D1B4B 0%, #2300E8 100%);
  --g-prog-2:  linear-gradient(135deg, #162566 0%, #4D35F0 100%);
  --g-prog-3:  linear-gradient(135deg, #1BA050 0%, #137A3C 100%);
  --g-prog-4:  linear-gradient(135deg, #0D1B4B 0%, #1BA050 100%);
  --g-prog-5:  linear-gradient(135deg, #1800B0 0%, #4D35F0 100%);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Inter', Arial, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Inter', Arial, sans-serif;
  --f-display:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-body:       'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --f-mono:       'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  44px;
  --fs-5xl:  56px;
  --fs-6xl:  72px;

  /* Font Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  /* Line Heights */
  --lh-none:    1;
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   1.75;

  /* ── Spacing (8pt grid) ─────────────────────────────────── */
  --sp-px:  1px;
  --sp-1:   4px;   --sp-2:   8px;   --sp-3:  12px;
  --sp-4:  16px;   --sp-5:  20px;   --sp-6:  24px;
  --sp-7:  28px;   --sp-8:  32px;   --sp-9:  36px;
  --sp-10: 40px;   --sp-11: 44px;   --sp-12: 48px;
  --sp-14: 56px;   --sp-16: 64px;   --sp-18: 72px;
  --sp-20: 80px;   --sp-24: 96px;   --sp-28: 112px;
  --sp-32: 128px;  --sp-40: 160px;  --sp-48: 192px;

  /* ── Border Radius ──────────────────────────────────────── */
  --r-none: 0px;
  --r-xs:   2px;   --r-sm:  4px;   --r-md:  8px;
  --r-lg:  12px;   --r-xl: 16px;   --r-2xl: 20px;
  --r-3xl: 24px;   --r-4xl: 32px;  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(13,27,75,0.06), 0 1px 3px rgba(13,27,75,0.10);
  --sh-2: 0 2px 4px rgba(13,27,75,0.06), 0 4px 8px rgba(13,27,75,0.10);
  --sh-3: 0 4px 8px rgba(13,27,75,0.08), 0 8px 16px rgba(13,27,75,0.12);
  --sh-4: 0 8px 16px rgba(13,27,75,0.08), 0 16px 32px rgba(13,27,75,0.12);
  --sh-5: 0 16px 32px rgba(13,27,75,0.10), 0 32px 64px rgba(13,27,75,0.15);
  --sh-modal: 0 24px 48px rgba(13,27,75,0.18), 0 8px 16px rgba(13,27,75,0.12);
  --sh-nav:   0 1px 0 var(--c-border), 0 4px 16px rgba(13,27,75,0.06);
  --sh-blue:  0 8px 32px rgba(35,0,232,0.28), 0 2px 8px rgba(35,0,232,0.16);
  --sh-green: 0 8px 32px rgba(27,160,80,0.24), 0 2px 8px rgba(27,160,80,0.14);

  /* ── Transitions ────────────────────────────────────────── */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tr-fast:     0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --tr-normal:   0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --tr-slow:     0.40s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raise:    10;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Layout ─────────────────────────────────────────────── */
  --nav-h:            64px;
  --lay-nav-h:        68px;
  --lay-nav-mobile-h: 60px;
  --lay-bnav-h:       64px;
  --lay-sticky-bar-h: 64px;
  --lay-container:    1200px;
  --lay-wide:         1400px;
  --lay-narrow:       800px;
  --lay-touch:        44px;
  --container:        1200px;
  --container-wide:   1400px;
  --container-narrow: 800px;
  --touch:            44px;

  /* ── Letter spacing ─────────────────────────────────────── */
  --ls-tighter: -0.05em;
  --ls-tight:   -0.03em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.08em;
  --ls-widest:   0.12em;

  /* ── Section spacing ────────────────────────────────────── */
  --section-py:    var(--sp-20);
  --section-py-sm: var(--sp-12);
  --section-py-lg: var(--sp-32);

  /* ── Component tokens ───────────────────────────────────── */
  --card-radius:       var(--r-2xl);
  --card-padding:      var(--sp-6);
  --card-shadow:       var(--sh-2);
  --card-shadow-hover: var(--sh-4);
  --card-border:       1px solid var(--c-border);

  --btn-h:       44px;
  --btn-h-sm:    36px;
  --btn-h-lg:    52px;
  --btn-px:      var(--sp-6);
  --btn-radius:  var(--r-full);

  --input-h:      48px;
  --input-radius: var(--r-lg);
  --input-border: 1.5px solid var(--c-border);

  /* ── Nav glass (light / white) ─────────────────────────── */
  --nav-bg:       rgba(255,255,255,0.95);
  --nav-bg-solid: rgba(255,255,255,1);
  --nav-blur:     blur(20px) saturate(180%);
  --nav-shadow:   var(--sh-nav);

  /* ── Animation helpers ──────────────────────────────────── */
  --anim-reveal-y:    24px;
  --anim-stagger:     80ms;
  --anim-counter-dur: 1800ms;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tr-fast: 0s; --tr-normal: 0s; --tr-slow: 0s;
    --anim-reveal-y: 0px; --anim-stagger: 0ms; --anim-counter-dur: 0ms;
  }
}

/*
 * ── Elementor Global Color Palette Equivalents ──────────────
 * In Elementor > Site Settings > Global Colors, add:
 *   Electric Blue  → #2300E8
 *   Growth Green   → #1BA050
 *   Navy Dark      → #0D1B4B
 *   Blue Light     → #EEF0FF
 *   Green Light    → #E8F7EE
 *   Text Primary   → #1E293B
 *   Text Muted     → #64748B
 *   Gray 50        → #F4F6FF
 */