/* ============================================================
   R3CRUIT3R — Brand System
   Throwback terminal, flipped to paper. green · ink · paper.
   Shared across marketing, product, guidelines, comms.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- core palette ---- */
  --green:       #00B341;   /* phosphor — signal, on dark / fills */
  --green-deep:  #04802F;   /* readable green on paper */
  --green-dim:   #6fd897;   /* muted green */
  --green-wash:  #eafaf0;   /* faint green tint bg */
  --ink:         #0B0B0B;   /* near-black */
  --ink-2:       #1a1a1c;   /* elevated ink */
  --paper:       #ffffff;
  --paper-2:     #fafafa;   /* faint off-white surface */
  --line:        #e6e6e6;
  --line-2:      #d2d2d2;
  --muted:       #6b6b6b;
  --muted-2:     #9a9a9a;

  /* ---- semantic (status) ---- */
  --amber:       #C77400;   /* warning / pending — readable on paper */
  --amber-dim:   #FFB23E;
  --red:         #C8362B;   /* cold / lost */
  --amber-wash:  #fff5e6;
  --red-wash:    #fdecea;

  /* ---- type ---- */
  --pixel: 'Press Start 2P', monospace;   /* logo + numerals, sparingly */
  --term:  'VT323', monospace;            /* terminal voice, large only */
  --sans:  'Space Grotesk', system-ui, sans-serif; /* body + UI */
  --mono:  'JetBrains Mono', ui-monospace, monospace; /* dense data, labels */

  /* ---- geometry ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* ---- semantic surface roles (light default) ---- */
  --bg:        var(--paper);
  --bg-2:      var(--paper-2);
  --fg:        var(--ink);
  --fg-muted:  var(--muted);
  --border:    var(--line);
  --border-2:  var(--line-2);
  --accent:    var(--green-deep);
  --accent-bg: var(--green);
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
}

/* ============ DARK / PHOSPHOR MODE ============ */
[data-theme="phosphor"] {
  --bg:        #060807;
  --bg-2:      #0d100e;
  --fg:        #d6ffe4;
  --fg-muted:  #5f8a6f;
  --border:    #16261c;
  --border-2:  #20392a;
  --accent:    var(--green);
  --accent-bg: var(--green);
  --paper:     #060807;     /* remap so paper-based components invert */
  --paper-2:   #0d100e;
  --ink:       #d6ffe4;
  --line:      #16261c;
  --line-2:    #20392a;
  --muted:     #5f8a6f;
  --shadow-hard: 0 0 0 1px #16261c, 6px 6px 0 #00160a;
  --shadow-hard-sm: 0 0 0 1px #16261c, 3px 3px 0 #00160a;
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}

/* ============ CRT scanlines overlay ============ */
.scan {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.022) 0 1px, transparent 1px 3px);
}
[data-theme="phosphor"] .scan {
  background: repeating-linear-gradient(0deg, rgba(0,255,90,0.035) 0 1px, transparent 1px 3px);
}

/* ============ layout ============ */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 40px; }

/* ============ eyebrow / kicker ============ */
.eyebrow {
  font-family: var(--term); font-size: 21px; letter-spacing: 0.04em;
  color: var(--accent); margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ">"; color: var(--accent-bg); font-weight: 700; }

/* ============ headings ============ */
h1, h2, h3 { font-family: var(--sans); letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; margin: 0; }
h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; margin: 0 0 14px; }
h3 { font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
.lede { font-size: 18px; line-height: 1.55; color: var(--fg); max-width: 62ch; }
.lede .g { color: var(--accent); font-weight: 500; }
.muted { color: var(--fg-muted); }
.term-note { font-family: var(--term); font-size: 20px; color: var(--fg-muted); }

/* ============ blinking block cursor ============ */
.cur {
  display: inline-block; width: 0.6em; height: 1.05em; background: var(--accent-bg);
  vertical-align: -0.12em; margin-left: 0.1em; animation: blink 1.05s steps(1) infinite;
}
.cur.ink { background: var(--fg); }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce) { .cur { animation: none; } }

/* ============ the wordmark ============ */
.wordmark {
  font-family: var(--pixel); color: var(--accent-bg); line-height: 1; letter-spacing: 0.02em;
  display: inline-block; white-space: nowrap;
}
.wordmark .e3 { color: var(--fg); }      /* leet 3's flip to ink */
.wordmark .prompt { color: var(--accent-bg); margin-right: 0.5em; }
.wordmark.ink { color: var(--fg); }
.wordmark.ink .e3 { color: var(--accent); }
[data-theme="phosphor"] .wordmark .e3 { color: #d6ffe4; }

/* ============ terminal window ============ */
.term-win {
  border: 1.5px solid var(--fg); border-radius: var(--r-md); overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow-hard);
}
.term-win.flat { box-shadow: none; }
.term-bar {
  background: var(--ink); color: var(--green); font-family: var(--term); font-size: 19px;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; letter-spacing: 0.03em;
}
[data-theme="phosphor"] .term-bar { background: #0d100e; border-bottom: 1px solid var(--border); }
.term-bar .dots { display: flex; gap: 6px; margin-left: auto; }
.term-bar .dots i { width: 11px; height: 11px; border: 1.5px solid var(--green); display: block; }
.term-bar .dots i.fill { background: var(--green); }
.term-body { padding: 30px; }
.boot { font-family: var(--term); font-size: 21px; line-height: 1.35; color: var(--accent); margin: 0; }
.boot b { color: var(--fg); font-weight: 400; }
.boot .ok { color: var(--green); }

/* ============ buttons ============ */
.btn {
  font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; cursor: pointer;
  border-radius: var(--r-sm); border: 1.5px solid var(--fg); background: var(--bg); color: var(--fg);
  text-decoration: none; transition: transform .08s, box-shadow .08s, background .12s;
  box-shadow: var(--shadow-hard-sm);
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--green); border-color: var(--ink); color: #04210f; }
[data-theme="phosphor"] .btn-primary { color: #021008; }
.btn-ghost { box-shadow: none; border-color: var(--border-2); }
.btn-ghost:hover { box-shadow: none; background: var(--bg-2); transform: none; border-color: var(--fg); }
.btn .k { font-family: var(--term); font-size: 17px; opacity: .7; }

/* ============ badges / status pills ============ */
.badge {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--r-sm); border: 1px solid var(--border-2); color: var(--fg-muted);
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: currentColor; }
.badge.b-committed { color: var(--green-deep); border-color: color-mix(in oklab, var(--green-deep) 35%, transparent); background: var(--green-wash); }
.badge.b-warm     { color: var(--amber);     border-color: color-mix(in oklab, var(--amber) 35%, transparent);     background: var(--amber-wash); }
.badge.b-cold     { color: var(--red);       border-color: color-mix(in oklab, var(--red) 30%, transparent);       background: var(--red-wash); }
.badge.b-neutral  { color: var(--fg-muted);  border-color: var(--border-2); }
[data-theme="phosphor"] .badge.b-committed { color: var(--green); background: rgba(0,179,65,.1); }
[data-theme="phosphor"] .badge.b-warm { color: var(--amber-dim); background: rgba(255,178,62,.08); border-color: rgba(255,178,62,.3); }
[data-theme="phosphor"] .badge.b-cold { color: #ff7b6e; background: rgba(200,54,43,.1); border-color: rgba(255,123,110,.3); }

/* ============ chips (filters, tags) ============ */
.chip {
  font-family: var(--mono); font-size: 12px; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 10px;
  display: inline-flex; align-items: center; gap: 7px; background: var(--bg); cursor: pointer;
}
.chip.on { color: var(--fg); border-color: var(--fg); background: var(--bg-2); }

/* ============ cards / surfaces ============ */
.card {
  background: var(--bg); border: 1.5px solid var(--fg); border-radius: var(--r-md);
}
.card.soft { border-color: var(--border); }
.surface { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); }

/* ============ data label ============ */
.dlabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.dval   { font-family: var(--term); font-size: 28px; color: var(--fg); line-height: 1; }

/* ============ footer ============ */
.foot { padding: 44px 0 80px; font-family: var(--term); font-size: 19px; color: var(--fg-muted); }

/* ============ a11y ============ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

@media (max-width: 720px) {
  .wrap, .wrap-narrow { padding: 0 22px; }
}