/* ============================================================
   K-LAB DESIGN SYSTEM — colors, type, spacing, radii, motion
   Load this once at the top of any page. All tokens are CSS vars.
   ============================================================ */

/* --- Fonts ---
   SAIBA-45 is the actual brand display face used in the K-LAB and K-WAYS wordmarks.
   JetBrainsMonoNerdFontPropo is the self-hosted mono face — a Nerd-Font-patched build
   that carries the kit's icon glyphs (♪  bolt, etc.). It ships as a tiny web subset
   (Latin + symbols + the 5 icon glyphs we use, ~45KB/weight); the full-glyph masters
   live in fonts/source/ for future glyph expansion (rebuild via fonts/build_mono.py).
   Google Fonts cover body (Space Grotesk), tech-sub (Zen Dots), decorative Japanese
   (Stick), and provide plain 'JetBrains Mono' as the mono fallback if the subset fails.
   Anton + Saira are kept as fallbacks in case SAIBA-45 fails to load.
*/
@font-face {
  font-family: 'SAIBA-45';
  src: url('fonts/SAIBA-45.woff') format('woff'),
       url('fonts/SAIBA-45.ttf')  format('truetype'),
       url('fonts/SAIBA-45.otf')  format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SAIBA-45-Outline';
  src: url('fonts/SAIBA-45-Outline.woff') format('woff'),
       url('fonts/SAIBA-45-Outline.ttf')  format('truetype'),
       url('fonts/SAIBA-45-Outline.otf')  format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrainsMonoNerdFontPropo';
  src: url('fonts/JetBrainsMonoNerdFontPropo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrainsMonoNerdFontPropo';
  src: url('fonts/JetBrainsMonoNerdFontPropo-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrainsMonoNerdFontPropo';
  src: url('fonts/JetBrainsMonoNerdFontPropo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Saira+Condensed:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Space+Grotesk:wght@300..700&family=JetBrains+Mono:wght@300..700&family=Zen+Dots&family=Stick&display=swap');

:root {
  /* ============ COLORS ============ */

  /* Base — dark-only, neon-on-black */
  --bg:           #000000;   /* canvas */
  --bg-elev:     #0a0a10;   /* elevated surfaces (cards, sheets) */
  --bg-elev-2:   #14141c;   /* hover/elevated-2 */

  /* Foreground */
  --fg:           #ffffff;   /* primary text */
  --fg-2:         #b8b8c4;   /* secondary text, captions */
  --fg-3:         #6a6a78;   /* dim, disabled, metadata */
  --fg-on-neon:   #000000;   /* text on solid neon */

  /* Borders */
  --line:         rgba(255,255,255,0.12);
  --line-strong:  rgba(255,255,255,0.24);
  --line-dim:     rgba(255,255,255,0.06);

  /* Brand neons — magenta is primary signature */
  --neon-magenta:      #ff00ea;
  --neon-magenta-deep: #a200d6;   /* the discovery rings */
  --neon-cyan:         #00e7ff;   /* chromatic aberration partner */
  --neon-pink:         #ff5cc4;   /* warm aberration partner */

  /* Racing accents (use sparingly) */
  --neon-red:    #ff2a2a;   /* brake-light, alerts, REC */
  --neon-green:  #00ff85;   /* NOS, live, on-air */
  --chrome:      #c8ccd6;   /* K-Ways auto crossovers */

  /* Semantic — bind to brand */
  --primary:        var(--neon-magenta);
  --primary-soft:   var(--neon-magenta-deep);
  --accent:         var(--neon-cyan);
  --live:           var(--neon-green);
  --danger:         var(--neon-red);
  --selection:      rgba(255,0,234,0.32);

  /* Glow shadows */
  --glow-magenta:    0 0 24px rgba(255,0,234,0.55), 0 0 1px rgba(255,0,234,0.9);
  --glow-magenta-sm: 0 0 8px rgba(255,0,234,0.55);
  --glow-cyan:       0 0 24px rgba(0,231,255,0.55), 0 0 1px rgba(0,231,255,0.9);
  --glow-cyan-sm:    0 0 8px rgba(0,231,255,0.55);
  --glow-green:      0 0 18px rgba(0,255,133,0.55);
  --glow-red:        0 0 18px rgba(255,42,42,0.55);

  /* ============ TYPOGRAPHY — families ============ */
  --font-display:  'SAIBA-45', 'Anton', 'Bebas Neue', sans-serif;         /* THE brand face — K-LAB / K-WAYS wordmark */
  --font-display-outline: 'SAIBA-45-Outline', 'SAIBA-45', sans-serif;     /* hollow variant — for special effects */
  --font-speed:    'SAIBA-45', 'Saira Condensed', sans-serif;             /* same face italicized for K-WAYS racing wordmark */
  --font-tech:     'Zen Dots', 'Audiowide', sans-serif;                   /* DISCOVERY-style subtitle */
  --font-body:     'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono:     'JetBrainsMonoNerdFontPropo', 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
  --font-jp:       'Stick', 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;

  /* Type scale — display */
  --fs-hero:    clamp(72px, 14vw, 220px);  /* hero takeover */
  --fs-d1:      96px;
  --fs-d2:      72px;
  --fs-d3:      56px;
  --fs-d4:      40px;
  --fs-h1:      32px;
  --fs-h2:      24px;
  --fs-h3:      20px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;
  --fs-mono:    13px;
  --fs-mono-sm: 11px;

  /* Line height */
  --lh-tight:   0.92;
  --lh-snug:    1.08;
  --lh-normal:  1.4;
  --lh-loose:   1.6;

  /* Tracking */
  --tr-tight:    -0.02em;   /* display heavy */
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-mono:      0.08em;    /* mono caps */
  --tr-jp:        0.18em;    /* japanese tracked out for decorative use */

  /* ============ SPACING (4px base) ============ */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;
  --s-12: 256px;

  /* ============ RADII ============ */
  --r-0:    0;          /* brutalist default */
  --r-1:    2px;
  --r-2:    4px;        /* cards max */
  --r-pill: 999px;      /* pill buttons & tags */

  /* ============ MOTION ============ */
  --ease-stiff: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.1, 1);
  --d-micro:  60ms;
  --d-short: 180ms;
  --d-med:   320ms;
  --d-long:  640ms;

  /* ============ Z-INDEX ============ */
  --z-base:   1;
  --z-overlay: 10;
  --z-modal:   100;
  --z-toast:   1000;
}

/* ============ BASE RESET + DEFAULTS ============ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); color: var(--fg); }

/* ============ SEMANTIC TYPE PRIMITIVES ============ */

.t-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  font-weight: 400; /* SAIBA-45 has one weight */
}
.t-outline {
  font-family: var(--font-display-outline);
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
}
.t-d1, h1.t-d1 { font-family: var(--font-display); font-size: var(--fs-d1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); text-transform: uppercase; }
.t-d2          { font-family: var(--font-display); font-size: var(--fs-d2); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); text-transform: uppercase; }
.t-d3          { font-family: var(--font-display); font-size: var(--fs-d3); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); text-transform: uppercase; }
.t-d4          { font-family: var(--font-display); font-size: var(--fs-d4); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); text-transform: uppercase; }

.t-speed      { font-family: var(--font-speed); font-style: normal; font-weight: 400; text-transform: uppercase; letter-spacing: var(--tr-normal); transform: skewX(-10deg); display: inline-block; }
.t-tech       { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: var(--tr-wide); }
.t-jp         { font-family: var(--font-jp); letter-spacing: var(--tr-jp); font-weight: 400; }

.t-h1 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
.t-h2 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); }
.t-h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-body  { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-small { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-2); }

.t-mono    { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-2); }
.t-mono-sm { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-3); }

/* ============ EFFECTS ============ */

/* Chromatic aberration on type — apply to a span; offsets a cyan and magenta copy */
.fx-aberration {
  text-shadow:
    -1.5px 0 0 var(--neon-magenta),
     1.5px 0 0 var(--neon-cyan);
}
.fx-aberration-strong {
  text-shadow:
    -3px 0 0 var(--neon-magenta),
     3px 0 0 var(--neon-cyan);
}

/* Neon glow on type */
.fx-glow-magenta {
  color: var(--fg);
  text-shadow: 0 0 8px rgba(255,0,234,0.9), 0 0 24px rgba(255,0,234,0.7);
}
.fx-glow-cyan {
  color: var(--fg);
  text-shadow: 0 0 8px rgba(0,231,255,0.9), 0 0 24px rgba(0,231,255,0.7);
}

/* Background patterns */
.bg-rings {
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0%,        transparent 8%,
      var(--neon-magenta) 9%, var(--neon-magenta) 10%,
      transparent 11%,       transparent 18%,
      var(--neon-magenta-deep) 19%, var(--neon-magenta-deep) 22%,
      transparent 23%,       transparent 32%,
      var(--neon-magenta-deep) 33%, var(--neon-magenta-deep) 38%,
      transparent 39%,       transparent 50%,
      var(--neon-magenta-deep) 51%, var(--neon-magenta-deep) 58%,
      transparent 59%,       transparent 72%,
      var(--neon-magenta-deep) 73%, var(--neon-magenta-deep) 82%,
      transparent 83%
    ),
    radial-gradient(circle at 50% 50%, rgba(162,0,214,0.4) 0%, transparent 70%),
    #000;
}

.bg-scanlines {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0) 0px,
    rgba(255,255,255,0) 2px,
    rgba(255,255,255,0.04) 2px,
    rgba(255,255,255,0.04) 3px
  );
}

.bg-halftone {
  background-image: radial-gradient(rgba(255,0,234,0.55) 22%, transparent 23%);
  background-size: 6px 6px;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ============ ANIMATIONS ============ */

@keyframes flicker {
  0%, 100% { opacity: 1; }
  10%, 12% { opacity: 0.6; }
  11%      { opacity: 0.9; }
}
.anim-flicker { animation: flicker 4.5s var(--ease-stiff) infinite; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.anim-marquee { animation: marquee 30s linear infinite; }

@keyframes ripple {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
.anim-ripple { animation: ripple 1.8s var(--ease-stiff) infinite; }

@keyframes scanline-roll {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}
.anim-scanline-roll { animation: scanline-roll 4s linear infinite; }