/* =========================================================================
   VECTOR ENGINEERING — DESIGN TOKENS
   Palette extracted directly from the official logo. See brief §3.
   ========================================================================= */

:root{
  /* ---- Brand palette (raw) ---- */
  --c-indigo:   #000870;   /* deepest gradient stop / wordmark "ENGINEERING" */
  --c-blue:     #204080;   /* mid-tone of wing gradient */
  --c-sky:      #50A8E0;   /* lightest highlight of wing gradient */
  --c-charcoal: #404040;   /* "VECTOR" wordmark / circle arc */
  --c-ink:      #16181D;   /* dark-mode background */
  --c-white:    #FFFFFF;
  --c-surface:  #F7F9FC;

  /* WhatsApp brand green, darkened from the literal brand hex (#25D366-family)
     to meet WCAG AA 4.5:1 contrast with white button text — the literal
     brand green only achieves ~2.9:1. */
  --c-whatsapp: #0E7A38;
  --c-whatsapp-hover: #0A632E;
  --c-whatsapp-rgb: 14, 122, 56;

  /* derived, accessibility-checked neutrals (never invented brand colors) */
  --c-ink-elevated: #1C2030; /* dark-mode card surface, blue-tinted off ink */
  --c-ink-alt:       #10121A; /* dark-mode recessed surface / footer-on-dark */
  --c-text-on-dark:  #E8ECF4; /* body text on dark bg, derived from c-surface */
  --c-text-muted-on-dark: #9AA3B8;
  --c-border-light:  rgba(22, 24, 29, 0.10);
  --c-border-dark:   rgba(232, 236, 244, 0.12);

  /* ---- Brand gradient — reserved for hero bg, primary buttons, scroll bar ---- */
  --gradient-brand: linear-gradient(135deg, var(--c-indigo) 0%, var(--c-blue) 55%, var(--c-sky) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(0,8,112,0.92) 0%, rgba(32,64,128,0.88) 55%, rgba(80,168,224,0.85) 100%);

  /* ---- Semantic tokens (LIGHT mode defaults) ---- */
  --bg:            var(--c-white);
  --bg-alt:        var(--c-surface);
  --bg-elevated:   var(--c-white);
  --text:          var(--c-charcoal);
  --text-muted:    #6B6F76;
  --heading:       var(--c-indigo);
  --accent:        var(--c-blue);
  --accent-strong: var(--c-indigo);
  --accent-bright: var(--c-sky);
  --border:        var(--c-border-light);
  --surface-card:  var(--c-white);
  --shadow-color:  0, 8, 112;
  --nav-bg:        rgba(255,255,255,0.82);
  --footer-bg:     var(--c-indigo);
  --footer-text:   rgba(255,255,255,0.78);

  /* ---- Typography ---- */
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  --fs-h3: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  --fs-h4: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;
  --fs-stat: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8.5rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 1rem + 2.5vw, 3rem);

  /* ---- Radius & shape ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* ---- Elevation (colored, brand-tinted) ---- */
  --shadow-sm: 0 4px 14px -6px rgba(var(--shadow-color), 0.18);
  --shadow-md: 0 18px 38px -16px rgba(var(--shadow-color), 0.24);
  --shadow-lg: 0 30px 60px -24px rgba(var(--shadow-color), 0.32);
  --shadow-glow: 0 0 0 1px rgba(80,168,224,0.18), 0 14px 40px -12px rgba(80,168,224,0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* ---- Z-index scale ---- */
  --z-cursor: 9999;
  --z-loader: 9000;
  --z-nav: 800;
  --z-overlay: 700;
  --z-progress: 850;
  --z-fab: 600;

  color-scheme: light;
}

/* ---- DARK mode overrides ---- */
html[data-theme="dark"]{
  --bg:            var(--c-ink);
  --bg-alt:        var(--c-ink-alt);
  --bg-elevated:   var(--c-ink-elevated);
  --text:          var(--c-text-on-dark);
  --text-muted:    var(--c-text-muted-on-dark);
  --heading:       #FFFFFF;
  --accent:        var(--c-sky);
  --accent-strong: #7FC1EC;
  --accent-bright: var(--c-sky);
  --border:        var(--c-border-dark);
  --surface-card:  var(--c-ink-elevated);
  --shadow-color:  0, 0, 0;
  --nav-bg:        rgba(22,24,29,0.78);
  --footer-bg:     var(--c-ink-alt);
  --footer-text:   rgba(232,236,244,0.72);
  color-scheme: dark;
}

/* Reduced motion is handled as a data-attribute toggle in animations.css,
   driven by both prefers-reduced-motion and the manual UI toggle. */