/* =========================================================================
   AI OPERATORS — DESIGN SYSTEM v1.0
   Canonical tokens: colors, typography, spacing, motion, borders, shadows.
   ========================================================================= */

/* ---- Webfont imports --------------------------------------------------- */
/* All three families are locally licensed TTFs in fonts/. No CDN imports. */

@font-face {
  font-family: 'Eurostile Extended';
  src: url('fonts/Eurostile-Bold_Regular.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── COLOR SYSTEM ───────────────────────────────────────────────────── */
  --primary-green:    #00FF41;  /* CTAs, success, signal accents */
  --primary-green-dim:#00B82E;  /* hover / pressed green */
  --primary-green-glow: 0 0 8px rgba(0, 255, 65, 0.55);

  --carbon-black:     #1A1A1A;  /* primary background, authority surface */
  --carbon-black-2:   #222222;  /* elevated surface */
  --carbon-black-3:   #2C2C2C;  /* hover surface */
  --void-black:       #000000;  /* pure black fills, max contrast */

  --platinum-silver:  #C0C0C0;  /* engineering precision, heritage marks */
  --platinum-dim:     #8A8A8A;  /* secondary text on dark */
  --platinum-deep:    #4A4A4A;  /* hairline, divider */

  --pure-white:       #FFFFFF;  /* clarity, certification */
  --white-85:         rgba(255,255,255,0.85);
  --white-55:         rgba(255,255,255,0.55);
  --white-10:         rgba(255,255,255,0.10);
  --white-05:         rgba(255,255,255,0.05);

  --electric-blue:    #0057A8;  /* data viz only */
  --warning-orange:   #FF6600;  /* volume overflow / capacity warnings ONLY */

  /* ── SEMANTIC COLORS ────────────────────────────────────────────────── */
  --bg:               var(--carbon-black);
  --bg-elev:          var(--carbon-black-2);
  --bg-void:          var(--void-black);
  --fg:               var(--pure-white);
  --fg-2:             var(--platinum-silver);
  --fg-3:             var(--platinum-dim);
  --accent:           var(--primary-green);
  --hairline:         rgba(255,255,255,0.08);
  --hairline-strong:  rgba(255,255,255,0.18);
  --signal:           var(--primary-green);

  /* ── GREEN ROLE TOKENS (v1.1 — Brand DNA tightening) ─────────────────
     Route pure #00FF41 to highlight/glow/CTA ONLY.
     Route dim #00B82E to ambient body strokes, hex-grid, and rules.
     Restores the signal meaning of full-saturation green.
  ─────────────────────────────────────────────────────────────────── */
  --green-highlight:  var(--primary-green);      /* glow + master-belief accent */
  --green-stroke:     var(--primary-green-dim);  /* hex-grid lines, body hairlines, ambient rules */
  --green-precision:  var(--primary-green);      /* the 6px precision underline stays pure */
  --green-cta:        var(--primary-green);      /* CTA fill stays pure */
  --green-glow:       rgba(0, 255, 65, 0.55);    /* outer glow color */
  --green-glow-dim:   rgba(0, 184, 46, 0.35);    /* ambient stroke glow */

  /* ── TYPOGRAPHY STACKS ──────────────────────────────────────────────── */
  /* Display — Eurostile Bold (licensed, local) */
  --font-display:     'Eurostile Extended', 'Eurostile', 'Bebas Neue', 'Druk Wide', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── TYPE SCALE ─────────────────────────────────────────────────────── */
  --fs-display:       72px;   /* hero display */
  --fs-h1:            48px;
  --fs-h2:            36px;
  --fs-h3:            24px;
  --fs-h4:            18px;
  --fs-body:          16px;   /* min body */
  --fs-body-lg:       18px;
  --fs-small:         14px;   /* min technical label */
  --fs-micro:         11px;

  --lh-tight:         1.04;
  --lh-snug:          1.2;
  --lh-body:          1.55;
  --lh-loose:         1.7;

  /* ── SPACING (4pt grid) ─────────────────────────────────────────────── */
  --space-0:          0;
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          24px;
  --space-6:          32px;
  --space-7:          48px;
  --space-8:          64px;
  --space-9:          96px;
  --space-10:         128px;

  /* ── RADII (deliberately tight — engineering, not friendly) ─────────── */
  --radius-0:         0px;       /* default: sharp corners */
  --radius-1:         2px;       /* hairline rounding */
  --radius-2:         4px;       /* subtle */
  --radius-pill:      999px;     /* only for badges/tags */

  /* ── BORDERS ────────────────────────────────────────────────────────── */
  --border-hairline:  1px solid var(--hairline);
  --border-strong:    1px solid var(--hairline-strong);
  --border-signal:    1px solid var(--primary-green);
  --border-underline: 6px solid var(--primary-green);   /* precision underline */

  /* ── SHADOWS / GLOWS (outer glow, never drop-shadow) ────────────────── */
  --glow-signal-sm:   0 0 4px rgba(0,255,65,0.45);
  --glow-signal:      0 0 8px rgba(0,255,65,0.55), 0 0 16px rgba(0,255,65,0.25);
  --glow-signal-lg:   0 0 12px rgba(0,255,65,0.75), 0 0 32px rgba(0,255,65,0.35);
  --glow-void:        0 0 0 1px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.6);
  --elev-1:           0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(255,255,255,0.06);
  --elev-2:           0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(255,255,255,0.10);

  /* ── MOTION ─────────────────────────────────────────────────────────── */
  --ease-precision:   cubic-bezier(0.2, 0.8, 0.2, 1);   /* snap, no bounce */
  --ease-linear:      linear;
  --dur-fast:         120ms;
  --dur-base:         180ms;
  --dur-slow:         320ms;

  /* ── LAYOUT ─────────────────────────────────────────────────────────── */
  --container-max:    1280px;
  --gutter:           24px;
}

/* =========================================================================
   BASE ELEMENTS
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — geometric, wide, uppercase bias */
h1, h2, h3, .display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;   /* wide tracking on display type */
  line-height: var(--lh-tight);
  color: var(--fg);
  text-transform: uppercase;
}

h1, .h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: 0.04em; }
h4, .h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.display {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 0.96;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--white-85);
  text-wrap: pretty;
}

small, .small { font-size: var(--fs-small); color: var(--fg-3); }

/* Technical labels — ALL CAPS monospace, neon green */
.label, .meta, .technical {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.18em;        /* tracking +150–200 */
  text-transform: uppercase;
  color: var(--primary-green);
}

code, kbd, pre, .code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--platinum-silver);
}

/* Double white hairlines above headings (optional utility) */
.hairline-top {
  position: relative;
  padding-top: 12px;
}
.hairline-top::before,
.hairline-top::after {
  content: "";
  position: absolute;
  left: 0;
  width: 85%;
  height: 1px;
  background: var(--pure-white);
  opacity: 0.9;
}
.hairline-top::before { top: 0; }
.hairline-top::after  { top: 4px; }

/* Neon precision underline bar */
.precision-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.precision-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: var(--primary-green);
  box-shadow: var(--glow-signal);
}

/* L-shaped corner brackets container */
.bracketed {
  position: relative;
  padding: var(--space-5);
}
.bracketed::before,
.bracketed::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--primary-green);
}
.bracketed::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracketed::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Focus state — engineering spec: 2px neon outline, 4px offset */
:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 4px;
}

/* Hexagonal grid background utility (v1.1 — uses dim-green stroke) */
.hex-grid-bg {
  background-color: var(--bg);
  background-image:
    linear-gradient(30deg,  rgba(0,184,46,0.035) 12%, transparent 12.5%, transparent 87%, rgba(0,184,46,0.035) 87.5%, rgba(0,184,46,0.035)),
    linear-gradient(150deg, rgba(0,184,46,0.035) 12%, transparent 12.5%, transparent 87%, rgba(0,184,46,0.035) 87.5%, rgba(0,184,46,0.035)),
    linear-gradient(30deg,  rgba(0,184,46,0.035) 12%, transparent 12.5%, transparent 87%, rgba(0,184,46,0.035) 87.5%, rgba(0,184,46,0.035)),
    linear-gradient(150deg, rgba(0,184,46,0.035) 12%, transparent 12.5%, transparent 87%, rgba(0,184,46,0.035) 87.5%, rgba(0,184,46,0.035)),
    linear-gradient(60deg,  rgba(0,184,46,0.025) 25%, transparent 25.5%, transparent 75%, rgba(0,184,46,0.025) 75%, rgba(0,184,46,0.025));
  background-size: 40px 70px;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0;
}

/* Scanline overlay (3% opacity) */
.scanlines {
  position: relative;
}
.scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Reduced motion — kill scanlines & glow pulse */
@media (prefers-reduced-motion: reduce) {
  .scanlines::after { display: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}