/* ==========================================================================
   NIGHTWING — DESIGN TOKENS
   Single source of truth for color, type, spacing, motion and elevation.
   Change brand values here and they propagate through the whole site.
   ========================================================================== */

:root {

  /* ---- Brand blue (sampled from the NightWing logo) -------------------- */
  --blue-950:  #041B33;
  --blue-900:  #062B4F;
  --blue-800:  #08386A;
  --blue-700:  #0B4A8C;
  --blue-600:  #0E5CAE;
  --blue-500:  #1470D6;   /* primary accent */
  --blue-400:  #3E8FE8;
  --blue-300:  #6FADEF;
  --blue-200:  #A7CBF5;
  --blue-100:  #DCEAFB;

  /* ---- Neutrals ---------------------------------------------------------
     Deliberately near-monochrome: black / near-black surfaces, white text,
     grey used ONLY as a whisper for secondary text and hairlines. */
  --black-0:   #000000;
  --ink-950:   #05070B;   /* page background */
  --ink-900:   #090C12;   /* raised surface (cards) */
  --ink-850:   #0D1119;   /* elevated surface (hover / active) */
  --ink-800:   #12161F;   /* input / chip surface */
  --line-soft: rgba(255,255,255,0.07);
  --line-mid:  rgba(255,255,255,0.14);
  --line-blue: rgba(20,112,214,0.35);

  --white:     #F7F9FC;
  --grey-300:  #C4CAD4;   /* body copy on dark */
  --grey-500:  #8A93A3;   /* secondary / muted text — used sparingly */
  --grey-700:  #4A5162;

  /* ---- Semantic ---------------------------------------------------------- */
  --color-bg:            var(--ink-950);
  --color-surface:       var(--ink-900);
  --color-surface-raised:var(--ink-850);
  --color-border:        var(--line-soft);
  --color-border-strong: var(--line-mid);
  --color-text:          var(--white);
  --color-text-muted:    var(--grey-300);
  --color-text-faint:    var(--grey-500);
  --color-accent:        var(--blue-500);
  --color-accent-bright: var(--blue-400);
  --color-accent-deep:   var(--blue-800);
  --color-danger:        #E5484D;

  /* ---- Gradients ---------------------------------------------------------- */
  --grad-accent: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-600) 100%);
  --grad-glow:   radial-gradient(60% 60% at 50% 40%, rgba(20,112,214,0.35) 0%, rgba(20,112,214,0) 70%);
  --grad-fade-b: linear-gradient(180deg, rgba(5,7,11,0) 0%, var(--ink-950) 100%);

  /* ---- Typography ---------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-2xs:  0.6875rem;  /* 11px */
  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.9375rem;  /* 15px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.375rem;   /* 22px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-2xl:  2.25rem;    /* 36px */
  --fs-3xl:  3rem;       /* 48px */
  --fs-4xl:  4rem;       /* 64px */
  --fs-5xl:  5.25rem;    /* 84px */

  /* fluid clamps for hero / section titles */
  --fs-hero:  clamp(2.6rem, 6.4vw + 0.6rem, 6rem);
  --fs-h2:    clamp(1.9rem, 3.2vw + 0.6rem, 3rem);
  --fs-h3:    clamp(1.25rem, 1.2vw + 0.8rem, 1.6rem);

  /* ---- Spacing scale (8px 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: 8rem;

  --section-pad-y: clamp(4rem, 8vw, 8rem);
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius ---------------------------------------------------------- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- Elevation ---------------------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px var(--line-blue), 0 20px 50px rgba(20,112,214,0.16);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:      cubic-bezier(.16,.84,.44,1);
  --ease-in-out:   cubic-bezier(.65,0,.35,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --dur-fast:  180ms;
  --dur-base:  360ms;
  --dur-slow:  620ms;

  /* ---- Layers ---------------------------------------------------------- */
  --z-nav: 500;
  --z-overlay: 600;
  --z-cursor: 900;
  --z-loader: 1000;
}

@media (max-width: 640px) {
  :root {
    --section-pad-y: clamp(3rem, 12vw, 4.5rem);
  }
}