/* ============================================================
   OPERATOR BREWING CO. — colors_and_type.css
   Terminal aesthetic. Monospace. Operator-grade coffee.
   ============================================================ */

/* ---------- Webfonts (Google Fonts substitute — flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=VT323&family=Press+Start+2P&display=swap');

:root {
  /* ============================================================
     COLOR — base palette
     ============================================================ */

  /* Surfaces — near-black backgrounds */
  --bg-0: #000000;          /* deepest, page bg */
  --bg-1: #0A0A0A;          /* primary surface */
  --bg-2: #111111;          /* card surface */
  --bg-3: #1A1A1A;          /* elevated surface */
  --bg-4: #222222;          /* hover/pressed surface */

  /* Foreground — terminal green is primary */
  --fg-0: #00FF41;          /* phosphor green — primary */
  --fg-1: #FFFFFF;          /* pure white — strong text */
  --fg-2: #B8B8B8;          /* secondary text */
  --fg-3: #6E6E6E;          /* tertiary text / metadata */
  --fg-4: #3A3A3A;          /* dividers / disabled */

  /* Terminal green scale */
  --green-50:  #E6FFEF;
  --green-100: #B3FFCC;
  --green-200: #66FF8C;
  --green-300: #33FF66;
  --green-400: #00FF41;     /* PRIMARY — phosphor */
  --green-500: #00CC34;
  --green-600: #009926;
  --green-700: #00661A;
  --green-800: #00330D;
  --green-900: #001A06;

  /* Per-product / accent palette (each SKU line gets one) */
  --accent-green:  #00FF41; /* exploit, persistence, payload */
  --accent-purple: #B266FF; /* zero-day, backdoor, honeypot */
  --accent-cyan:   #00E5FF; /* wireless, persistence, botnet */
  --accent-red:    #FF3344; /* brute-force, phishing */
  --accent-orange: #FF8C42; /* social engineer, privesc */
  --accent-yellow: #FFD23F; /* rootkit, lateral move */
  --accent-blue:   #4A9EFF; /* exfil */
  --accent-white:  #E8E8E8; /* payload, sandbox, obfuscated */

  /* Semantic */
  --color-success: var(--green-400);
  --color-warning: var(--accent-yellow);
  --color-danger:  var(--accent-red);
  --color-info:    var(--accent-cyan);

  /* Borders */
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);
  --border-accent:  var(--green-400);
  --border-dashed:  rgba(255, 255, 255, 0.18);

  /* Glow (use sparingly — focus/active only) */
  --glow-green:  0 0 12px rgba(0, 255, 65, 0.35), 0 0 2px rgba(0, 255, 65, 0.6);
  --glow-purple: 0 0 12px rgba(178, 102, 255, 0.35);
  --glow-red:    0 0 12px rgba(255, 51, 68, 0.35);

  /* ============================================================
     TYPE
     ============================================================ */
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Berkeley Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-pixel:   'VT323', 'JetBrains Mono', monospace;
  --font-bitmap:  'Press Start 2P', 'VT323', monospace;
  --font-body:    var(--font-mono);
  --font-display: var(--font-mono);

  /* Type scale (px) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  80px;
  --fs-6xl:  112px;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Line heights */
  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.18em;

  /* ============================================================
     SPACING — 8px grid
     ============================================================ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ============================================================
     RADII — angular by default
     ============================================================ */
  --radius-0:  0;
  --radius-1:  2px;     /* buttons, tags */
  --radius-2:  4px;     /* max for any chrome */
  --radius-3:  8px;     /* rare; emergency only */

  /* ============================================================
     ELEVATION — almost none. Terminals are flat.
     ============================================================ */
  --elev-0: none;
  --elev-1: 0 0 0 1px var(--border-default);                 /* 1px hairline */
  --elev-2: 0 0 0 1px var(--border-strong);
  --elev-focus: 0 0 0 2px var(--green-400), 0 0 12px rgba(0,255,65,0.4);

  /* ============================================================
     MOTION
     ============================================================ */
  --dur-instant: 80ms;
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-linear: linear;
}

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

::selection {
  background: var(--green-400);
  color: var(--bg-0);
}

/* Scrollbar — terminal style */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--fg-4); }
::-webkit-scrollbar-thumb:hover { background: var(--green-700); }

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
  margin: 0;
}

.body-sm { font-size: var(--fs-sm); }
.body-xs { font-size: var(--fs-xs); }

.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--green-400);
}

/* Pixel display moments */
.pixel { font-family: var(--font-pixel); letter-spacing: 0; }
.bitmap { font-family: var(--font-bitmap); letter-spacing: 0; }

/* Terminal prompt style */
.prompt {
  font-family: var(--font-mono);
  color: var(--green-400);
}
.prompt::before { content: '> '; color: var(--green-400); }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.label-accent {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--green-400);
}

/* Cursor */
.cursor::after {
  content: '█';
  color: var(--green-400);
  animation: blink 1s steps(2, start) infinite;
  margin-left: 2px;
}
@keyframes blink { to { visibility: hidden; } }

/* Strength rating */
.bolts { color: var(--green-400); letter-spacing: 1px; font-size: 0.9em; }