/* ============================================================
   Weststar Engineering — Design Tokens
   Direction: dark cinematic / enterprise deep-tech
   Single accent family (electric blue → cyan). The signature
   element is the scroll-scrub AI-video canvas, not a flat accent.
   Always reference these vars — never hardcode hex in components.
   ============================================================ */

:root {
  /* --- Surfaces (near-black, faint blue cast) --- */
  --bg:            #0a0c10;
  --bg-elev:       #0f131a;
  --bg-deep:       #06070a;
  --surface:       rgba(255, 255, 255, 0.035);
  --surface-2:     rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.09);
  --scrim-deep:    rgba(6, 7, 10, 0.72);   /* var(--bg-deep) at alpha — text legibility scrim over footage */

  /* --- Hairlines / borders --- */
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* --- Text --- */
  --text:       #eef1f6;
  --text-muted: #9aa3b2;
  --text-dim:   #5d6573;

  /* --- Accent (electric blue → cyan) --- */
  --accent:      #3ba9ff;
  --accent-2:    #6ee7ff;
  --accent-deep: #1a6fd0;
  --accent-grad: linear-gradient(135deg, #3ba9ff 0%, #6ee7ff 100%);
  --glow:        rgba(59, 169, 255, 0.35);
  --glow-soft:   rgba(59, 169, 255, 0.14);

  /* --- Typography --- */
  --font-display: "Space Grotesk", system-ui, sans-serif;  /* engineered, technical */
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace; /* labels / data */

  /* Fluid type scale */
  --fs-hero:    clamp(2.6rem, 6.5vw, 6rem);
  --fs-h2:      clamp(1.9rem, 4vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.65;

  /* --- Spacing / layout --- */
  --container: 1280px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 11vw, 9rem);

  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur:      0.4s;

  /* --- Elevation / glow --- */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset,
                 0 20px 50px -25px rgba(0,0,0,0.8);
  --shadow-glow: 0 0 0 1px var(--glow-soft),
                 0 18px 60px -20px var(--glow);

  --z-nav: 100;
  --z-overlay: 90;
  --z-preloader: 200;
}