/* ============================================================================
   tokens.css — NSS Electrics design system
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   BRAND GREEN: change --accent (and optionally --accent-deep) once the real
   logo is in hand. It is the ONLY line you need to touch to re-tune the green.
   ========================================================================== */
:root {
  /* ---- Colour -------------------------------------------------------- */
  --bg:           #0a0e0c;            /* near-black, slight green undertone   */
  --surface:      rgba(255,255,255,0.018);
  --surface-2:    #161d19;            /* layered card surface                 */
  --surface-3:    #1c241f;            /* raised / hover surface               */
  --text:         #e8efe9;
  --text-muted:   #9aa8a0;
  --text-dim:     #6f7d75;
  --accent:       #27d675;            /* ◀ PRIMARY GREEN — sampled from the real NSS logo emblem */
  --accent-deep:  #0b8f48;
  --accent-soft:  #8af0b3;
  --accent-glow:  rgba(39,214,117,0.35);
  --accent-faint: rgba(39,214,117,0.10);
  --border:       rgba(255,255,255,0.08);
  --border-2:     rgba(255,255,255,0.04);
  --danger:       #ff5c5c;

  /* ---- Typography ---------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale (clamp: min, preferred vw, max) */
  --fs-900: clamp(2.6rem, 1.4rem + 5.4vw, 5.25rem);   /* hero display      */
  --fs-800: clamp(2.1rem, 1.3rem + 3.6vw, 3.75rem);   /* page H1           */
  --fs-700: clamp(1.7rem, 1.2rem + 2.3vw, 2.75rem);   /* section heading   */
  --fs-600: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);  /* sub heading       */
  --fs-500: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); /* lead / card title */
  --fs-400: 1.0625rem;                                /* body              */
  --fs-300: 0.9375rem;                                /* small             */
  --fs-200: 0.8125rem;                                /* micro / eyebrow    */

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

  /* ---- Spacing (4 / 8 grid) ----------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-y: clamp(4rem, 3rem + 6vw, 8rem);
  --container: 1200px;
  --container-narrow: 760px;

  /* ---- Radius -------------------------------------------------------- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 999px;

  /* ---- Shadow / glow ------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --glow-accent: 0 0 0 1px var(--accent-faint), 0 8px 40px var(--accent-glow);

  /* ---- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-med:  280ms;
  --t-slow: 520ms;

  --header-h: 76px;
  color-scheme: dark;
}