/* ============================================================
   HEXENKRAFT s.r.o. — PRODUCTION STYLESHEET
   Self-contained: tokens + component classes. No runtime deps.
   ============================================================ */

/* ---- Fonts (self-hosted) --------------------------------- */
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/JetBrainsMono-Regular.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/JetBrainsMono-Bold.ttf") format("truetype"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/GeistMono-Regular.ttf") format("truetype"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/GeistMono-Bold.ttf") format("truetype"); }
@font-face { font-family:"Big Shoulders"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/BigShoulders-Regular.ttf") format("truetype"); }
@font-face { font-family:"Big Shoulders"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/BigShoulders-Bold.ttf") format("truetype"); }

/* ---- Tokens ---------------------------------------------- */
:root {
  --amber-50:#FFF4DB; --amber-100:#FFE3A8; --amber-200:#FFD074; --amber-300:#FFC247;
  --amber-400:#FFB216; --amber-500:#D8920A; --amber-600:#A66E08; --amber-700:#82520A;
  --amber-800:#54360A; --amber-900:#2E1E07;
  --black-950:#050300; --black-900:#0A0700; --black-850:#120D02; --black-800:#1A1304;
  --black-700:#261B06; --black-600:#382808;
  --phos-green:#3BE08A; --phos-red:#FF4D3D; --phos-cyan:#33D6D6;

  --surface-bg:var(--black-900); --surface-raised:var(--black-850); --surface-card:var(--black-800);
  --surface-inset:var(--black-950);

  /* Text steps are held above WCAG 2.1 AA (4.5:1) against surface-inset AND surface-card.
     Measured on surface-card, the darker of the two backgrounds:
     strong 12.3:1 · body 10.8:1 · muted 7.1:1 · faint 5.4:1 */
  --text-strong:var(--amber-300); --text-body:var(--amber-400); --text-muted:var(--amber-500);
  --text-faint:#B87F1A; --text-invert:var(--black-900);
  --border-hairline:var(--black-700); --border-line:var(--amber-700); --border-strong:var(--amber-400);
  --accent:var(--amber-400); --accent-hover:var(--amber-300); --accent-press:var(--amber-500);
  --accent-glow:rgba(255,178,22,0.35);
  --success:var(--phos-green); --danger:var(--phos-red); --info:var(--phos-cyan);
  --selection-bg:var(--amber-400); --selection-fg:var(--black-900);

  --font-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,monospace;
  --font-ui:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
  --font-display:"Big Shoulders","Geist Mono",ui-monospace,sans-serif;

  --radius-sm:2px;
  --shadow-sm:0 1px 0 rgba(0,0,0,0.5);
  --glow-text-sm:0 0 1px rgba(255,178,22,0.5),0 0 4px rgba(255,178,22,0.22);
  --glow-box:0 0 0 1px rgba(255,178,22,0.5),0 0 14px rgba(255,178,22,0.22);
  --scanlines-soft:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,0.07) 3px,rgba(0,0,0,0) 4px);
  --cursor-blink:1.06s;
  --site-pad:clamp(20px,5vw,32px);
}

@keyframes hx-blink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

/* ---- Base ------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--surface-inset); color:var(--text-body);
  font-family:var(--font-ui); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-variant-ligatures:none;
}
::selection { background:var(--selection-bg); color:var(--selection-fg); }
h1,h2,h3 { margin:0; }
p { margin:0 0 1rem; }
img { max-width:100%; display:block; }

.hx-cursor::after {
  content:"\2588"; margin-left:.06em; color:var(--accent);
  animation:hx-blink var(--cursor-blink) steps(1,end) infinite;
}
@media (prefers-reduced-motion:reduce) { .hx-cursor::after{animation:none;} html{scroll-behavior:auto;} }

/* ---- Focus (WCAG 2.4.7) ---------------------------------- */
:focus-visible {
  outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm);
}
a:focus-visible, button:focus-visible, .hx-btn:focus-visible, .hx-navlink:focus-visible, .hx-link:focus-visible {
  outline:3px solid var(--accent); outline-offset:2px; color:var(--text-strong);
}
.hx-btn--primary:focus-visible { outline-color:var(--amber-100); }

/* ---- Skip link (WCAG 2.4.1) ------------------------------ */
.hx-skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  background:var(--accent); color:var(--text-invert);
  padding:10px 18px; border-radius:0 0 var(--radius-sm) 0; text-decoration:none;
}
.hx-skip:focus { left:0; outline:3px solid var(--amber-100); outline-offset:2px; }

/* ---- Layout helpers -------------------------------------- */
.hx-wrap { min-height:100vh; background:var(--surface-inset); color:var(--text-body); font-family:var(--font-ui); position:relative; overflow:hidden; }
.hx-scanoverlay { position:fixed; inset:0; pointer-events:none; background-image:var(--scanlines-soft); z-index:3; }
.hx-section { max-width:1080px; margin:0 auto; }
.hx-kicker { font-family:var(--font-ui); text-transform:uppercase; letter-spacing:0.16em; font-size:13px; font-weight:700; color:var(--text-muted); }
.hx-rule { display:flex; align-items:center; gap:10px; }
.hx-rule .line { flex:1; height:1px; background:var(--border-hairline); }
.hx-rule .slash { color:var(--accent); }

/* ---- Header / nav ---------------------------------------- */
.hx-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px var(--site-pad); background:rgba(10,7,0,0.86); backdrop-filter:blur(6px); border-bottom:1px solid var(--border-hairline); }
.hx-nav { display:flex; align-items:center; gap:18px; font-family:var(--font-mono); font-size:14px; }
.hx-navlink { color:var(--text-muted); text-decoration:none; transition:color .15s ease; }
.hx-navlink:hover { color:var(--text-strong); }
.hx-navlink.active { color:var(--accent); text-shadow:var(--glow-text-sm); }

/* ---- Wordmark -------------------------------------------- */
.hx-wordmark { font-family:var(--font-mono); font-weight:700; font-size:16px; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-strong); text-decoration:none; white-space:nowrap; }
.hx-wordmark .k { color:var(--accent); }

/* ---- Buttons --------------------------------------------- */
.hx-btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:14px; text-transform:lowercase; letter-spacing:0.02em; text-decoration:none; border-radius:var(--radius-sm); border:1px solid var(--border-strong); padding:9px 16px; cursor:pointer; transition:background .15s ease,color .15s ease,box-shadow .15s ease; }
.hx-btn--primary { background:var(--accent); color:var(--text-invert); border-color:var(--accent); }
.hx-btn--primary:hover { background:var(--accent-hover); box-shadow:var(--glow-box); }
.hx-btn--secondary { background:transparent; color:var(--text-body); }
.hx-btn--secondary:hover { color:var(--accent-hover); border-color:var(--accent-hover); box-shadow:var(--glow-box); }
.hx-btn--ghost { background:transparent; color:var(--text-muted); border-color:transparent; }
.hx-btn--ghost:hover { color:var(--accent); }
.hx-btn--sm { padding:6px 14px; font-size:13px; }
.hx-btn--lg { padding:12px 22px; font-size:15px; }
.hx-btn--block { width:100%; }

/* ---- Badge ----------------------------------------------- */
.hx-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; padding:3px 9px; border-radius:999px; border:1px solid var(--border-hairline); background:var(--surface-card); }
.hx-badge .dot { width:6px; height:6px; border-radius:50%; }
.hx-badge--success { color:var(--success); } .hx-badge--success .dot { background:var(--success); }
.hx-badge--amber { color:var(--accent); } .hx-badge--amber .dot { background:var(--accent); }
.hx-badge--info { color:var(--info); } .hx-badge--info .dot { background:var(--info); }

/* ---- Card ------------------------------------------------ */
.hx-card { position:relative; background:var(--surface-card); border:1px solid var(--border-hairline); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); padding:20px; transition:border-color .15s ease,box-shadow .15s ease; }
.hx-card--hover:hover { border-color:var(--border-strong); box-shadow:var(--glow-box); }
.hx-card--ticks::before, .hx-card--ticks::after { content:""; position:absolute; width:7px; height:7px; border-color:var(--border-line); }
.hx-card--ticks::before { top:6px; left:6px; border-top:1px solid; border-left:1px solid; }
.hx-card--ticks::after { bottom:6px; right:6px; border-bottom:1px solid; border-right:1px solid; }

/* ---- Terminal -------------------------------------------- */
.hx-term { border:1px solid var(--border-line); border-radius:var(--radius-sm); background:var(--surface-bg); overflow:hidden; }
.hx-term--glow { box-shadow:var(--glow-box); border-color:var(--border-strong); }
.hx-term__bar { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface-raised); border-bottom:1px solid var(--border-hairline); font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
.hx-term__dots { display:flex; gap:5px; }
.hx-term__dots i { width:9px; height:9px; border-radius:50%; background:var(--border-line); display:block; }
.hx-term__body { padding:16px; }

/* ---- Callout --------------------------------------------- */
.hx-callout { display:flex; gap:14px; border:1px solid var(--border-line); border-left:3px solid var(--info); border-radius:var(--radius-sm); background:var(--surface-card); padding:18px 20px; }
.hx-callout__title { font-family:var(--font-ui); font-weight:700; color:var(--text-strong); margin-bottom:6px; }
.hx-callout__body { font-family:var(--font-ui); font-size:14px; line-height:1.55; color:var(--text-muted); }

/* ---- Footer link ----------------------------------------- */
.hx-link { color:var(--text-muted); text-decoration:none; transition:color .15s ease; }
.hx-link:hover { color:var(--accent); }
.hx-footer { border-top:1px solid var(--border-hairline); padding:48px var(--site-pad) 56px; background:var(--surface-inset); position:relative; z-index:4; }

/* ---- Responsive ------------------------------------------ */
@media (max-width:760px) {
  .hx-roster-grid { grid-template-columns:1fr !important; }
  .hx-roster-grid > div:first-child { position:static !important; }
}