/* raidandev shared theme: green terminal + sepia, matching the homepage.
   Linked AFTER each page's own <style>; it only overrides colours, type and surfaces, never layout.
   Covers the four variable sets in use: tools/services/kit (--bg --card --ink --muted --line --accent),
   ride (--mute --acc --ok*), vegas (--fg --mut --bd --acc --sp*). Specificity is bumped with html:root
   so it beats each page's own light/dark :root blocks. */
@font-face{font-family:'VT323';src:url(/assets/fonts/VT323.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/SpaceGrotesk.woff2) format('woff2');font-weight:300 700;font-display:swap}

:root:root:root{
  color-scheme:dark;
  --rd-bg:#14110b;--rd-panel:#1d1810;--rd-sepia:#e3d3b0;--rd-dim:#a39275;--rd-line:#3b3123;
  --rd-term:#3cff8a;--rd-term-dim:#22a85c;--rd-term-bg:#061209;--rd-glow:0 0 6px rgba(60,255,138,.5);
  --rd-amber:#ffb23e;--rd-red:#ff6a55;--rd-vt:'VT323',ui-monospace,monospace;
  /* tools, services, kit, tips, ddp, hemp */
  --bg:var(--rd-bg);--card:var(--rd-panel);--ink:var(--rd-sepia);--muted:var(--rd-dim);--line:var(--rd-line);
  --accent:var(--rd-term);--accent-ink:var(--rd-term-bg);--good:var(--rd-term);--warn:var(--rd-amber);--bad:var(--rd-red);
  /* ride */
  --mute:var(--rd-dim);--acc:var(--rd-term);--acc-ink:var(--rd-term-bg);--ok:var(--rd-term);--okbg:#0d2416;
  --warnbg:#2e2310;--badbg:#2e1410;--info:#9fd3ff;--infobg:#132029;
  /* vegas */
  --fg:var(--rd-sepia);--mut:var(--rd-dim);--bd:var(--rd-line);--accfg:var(--rd-term-bg);
  --sp:#2a2312;--spbd:var(--rd-amber);--spfg:#ffd88a;--warnfg:#ffb4a6;
}
html:root body{background-color:var(--rd-bg);color:var(--rd-sepia);font-family:'Space Grotesk',system-ui,sans-serif;
  background-image:radial-gradient(ellipse at 50% -10%,#2a2114 0,transparent 60%),radial-gradient(circle at 1px 1px,#221b11 1px,transparent 0);
  background-size:auto,22px 22px;background-attachment:fixed,scroll}
/* CRT scanlines over everything, never in the way of a click */
html:root body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}

/* top bars */
html:root header,html:root .top{background:rgba(20,17,11,.96);border-bottom:1px solid var(--rd-line)}
html:root header strong,html:root .top .brand{font:24px/1 var(--rd-vt);color:var(--rd-term);text-shadow:var(--rd-glow);font-weight:400;letter-spacing:.02em}
html:root header strong::after,html:root .top .brand::after{content:"_";animation:rd-blink 1.1s steps(1) infinite}
html:root header a,html:root header span,html:root .top a:not(.brand){color:var(--rd-term-dim);font-family:var(--rd-vt);font-size:19px;text-decoration:none}
html:root header a:hover,html:root .top a:not(.brand):hover{color:var(--rd-term);text-shadow:var(--rd-glow)}

/* headings */
html:root main h1,html:root body>h1{font-family:var(--rd-vt);font-weight:400;color:var(--rd-term);text-shadow:var(--rd-glow);
  font-size:clamp(34px,6vw,50px);line-height:1.02;letter-spacing:.01em}
html:root main h1::before,html:root body>h1::before{content:"> ";color:var(--rd-term-dim)}
html:root main h2{font-family:var(--rd-vt);font-weight:400;color:var(--rd-term);text-shadow:var(--rd-glow);font-size:28px;letter-spacing:.02em}
html:root main h3{color:#f1e6cf}
html:root .lead,html:root .lede{color:var(--rd-dim)}

/* panels: a worn sepia bezel look */
html:root .card,html:root main>section,html:root .banner,html:root .sponsor{background:linear-gradient(160deg,#211b12,#1a150e);
  border:1px solid var(--rd-line);box-shadow:inset 0 1px 0 rgba(255,235,200,.06),0 8px 20px rgba(0,0,0,.35)}
html:root .banner{border-style:dashed;border-color:#5a4a32}
html:root .tile{background:var(--rd-term-bg);border:1px solid #1d4a2e}
html:root .tile b{font-family:var(--rd-vt);font-weight:400;color:var(--rd-term);text-shadow:var(--rd-glow);font-size:34px}
html:root .tile small{color:var(--rd-term-dim)}

/* form fields read as terminal input */
html:root .f{background:var(--rd-term-bg);border-color:#1f6b3d}
html:root .f span{color:var(--rd-term-dim)}
html:root input:not([type=checkbox]):not([type=radio]):not([type=range]),html:root select,html:root textarea{
  background-color:var(--rd-term-bg);color:var(--rd-term);border-color:#1f6b3d;font-family:var(--rd-vt);font-size:22px;caret-color:var(--rd-term)}
html:root .f input,html:root .f select{background-color:transparent}
html:root input::placeholder,html:root textarea::placeholder{color:#1b7a43}
html:root select option{background:var(--rd-term-bg);color:var(--rd-term)}
html:root label{color:var(--rd-dim)}
html:root input[type=checkbox],html:root input[type=radio],html:root input[type=range]{accent-color:var(--rd-term)}
html:root input:focus,html:root select:focus,html:root textarea:focus{outline:2px solid var(--rd-term);outline-offset:-2px}

/* buttons */
html:root a.btn,html:root button,html:root input[type=submit],html:root .buy{font-family:var(--rd-vt);font-size:21px;letter-spacing:.04em;font-weight:400}
html:root a.btn,html:root button[type=submit],html:root input[type=submit],html:root .mode button[aria-pressed=true]{
  background:var(--rd-term);color:var(--rd-term-bg);border-color:var(--rd-term);text-shadow:none;box-shadow:0 0 10px rgba(60,255,138,.25)}
html:root a.btn:hover,html:root button[type=submit]:hover{background:#7dffb1}
html:root .mode button{background:transparent;color:var(--rd-term);border-color:#1f6b3d}

/* text bits */
html:root main a:not(.btn){color:var(--rd-term)}
html:root body>main>ul a,html:root body>main li a{color:var(--rd-term)}
html:root code,html:root pre{background:var(--rd-term-bg);color:var(--rd-term);border-color:#1d4a2e}
html:root details summary{color:var(--rd-term);font-family:var(--rd-vt);font-size:21px;font-weight:400}
html:root strong{color:#f1e6cf}
html:root td,html:root th{border-color:var(--rd-line)}
html:root th{color:var(--rd-dim)}
html:root ::selection{background:var(--rd-term);color:var(--rd-term-bg)}
html:root footer{color:var(--rd-term-dim);font-family:var(--rd-vt);font-size:18px}
html:root footer a{color:var(--rd-term-dim)}
html:root footer a:hover{color:var(--rd-term)}

/* power-on flicker when the page opens */
html:root main{animation:rd-on .5s ease-out both}
@keyframes rd-on{0%{opacity:0;filter:brightness(2.5)}40%{opacity:.7}60%{opacity:.4}100%{opacity:1;filter:none}}
@keyframes rd-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){html:root main,html:root header strong::after,html:root .top .brand::after{animation:none}}
@media print{html:root body::after{display:none}}