/* ============================================================================
   KILLERKORP — DESIGN TOKENS + BASE
   Single source of truth for colour, type, spacing, elevation, motion.
   ========================================================================== */

:root {
  /* --- Colour ---------------------------------------------------------- */
  --bg:            #0B0B0D;   /* near-black base (warmer than pure black)   */
  --bg-elev:       #141417;   /* raised surfaces / nav on scroll            */
  --surface:       #1A1A1E;   /* cards                                      */
  --surface-2:     #202025;   /* card hover / insets                        */

  --text:          #ECE6DD;   /* bone white — primary text                  */
  --text-muted:    #9A938B;   /* secondary text                            */
  --text-faint:    #847D74;   /* tertiary / captions (AA-safe for large)    */

  --accent:        #C8161D;   /* blood red                                  */
  --accent-hover:  #E11E25;
  --accent-press:  #A21016;
  --accent-ink:    #FBEDED;   /* text on red surfaces (AA verified)         */
  --accent-glow:   rgba(200, 22, 29, 0.38);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --ok:            #4ADE80;
  --warn:          #FBBF24;

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Bebas Neue", "Oswald", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-eyebrow: 0.78rem;
  --fs-body:    1.0625rem;   /* 17px */
  --fs-lead:    1.25rem;
  --fs-h3:      clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  --fs-h2:      clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);
  --fs-display: clamp(3.4rem, 1.8rem + 7.5vw, 9rem);

  --lh-body: 1.7;
  --lh-tight: 1.04;
  --tracking-wide: 0.16em;
  --tracking-wider: 0.28em;

  /* --- Spacing scale (8pt rhythm) -------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);   /* vertical section padding */
  --container: 1200px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* --- Radii ----------------------------------------------------------- */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;

  /* --- Elevation ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-3: 0 24px 60px -20px rgba(0,0,0,.8);
  --shadow-red: 0 12px 40px -12px var(--accent-glow);

  /* --- Motion ---------------------------------------------------------- */
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out, slightly springy   */

  /* --- Z-index scale --------------------------------------------------- */
  --z-grain: 1;
  --z-base: 10;
  --z-nav: 100;
  --z-menu: 200;
  --z-lightbox: 1000;
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* offset sticky nav for anchor links */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Headings use the display face by default */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}