/*
Theme Name: Tooloka
Theme URI: https://tooloka.com
Author: Reeoka
Description: Instrument. A dark, measured theme for a house of single-purpose diagnostic tools.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: tooloka
*/

/* ---------- Faces ---------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/space-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/space-grotesk-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/plex-mono-400.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --bg:#0E1116;
  --surface:#161B22;
  --raised:#1C232D;
  --ink:#E6EAF0;
  --muted:#8B95A5;
  --line:#232A34;
  --accent:#4C8FFF;
  --accent-ink:#04101F;
  --clean:#3FB984;
  --warn:#E0A82E;
  --fail:#E5534B;

  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  --sp-xs:6px; --sp-sm:12px; --sp-md:24px; --sp-lg:48px; --sp-xl:96px;
  --r-sm:4px; --r-md:8px;
  --wrap:1200px;
}

/* ---------- Reset (low specificity on purpose) ---------- */
:where(*,*::before,*::after){box-sizing:border-box}
:where(body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd){margin:0;padding:0}
:where(ul[role="list"],ol[role="list"]){list-style:none}
:where(img,svg){display:block;max-width:100%}
:where(a){color:inherit}
:where(button,input,select,textarea){font:inherit;color:inherit}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Primitives ---------- */
.wrap{width:min(100% - 2*var(--sp-md), var(--wrap));margin-inline:auto}
@media(min-width:1000px){.wrap{width:min(100% - 2*var(--sp-lg), var(--wrap))}}

.mono{font-family:var(--font-mono);font-size:.9em;letter-spacing:-.01em}
.muted{color:var(--muted)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.02em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:var(--r-md);border:1px solid transparent;
  font-family:var(--font-display);font-weight:500;font-size:16px;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:color-mix(in srgb, var(--accent) 86%, var(--ink))}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:color-mix(in srgb, var(--line) 62%, var(--muted))}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Site head ---------- */
.site-head{border-bottom:1px solid var(--line)}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);padding:20px 0}
.brand{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.03em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--accent)}
.site-nav{display:flex;gap:var(--sp-md);align-items:center;font-size:15px}
.site-nav a{text-decoration:none;color:var(--muted)}
.site-nav a:hover{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,104px)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero__title{font-size:clamp(2.5rem,5.4vw,4rem);line-height:1.04;max-width:14ch}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__sub{margin-top:var(--sp-md);max-width:52ch;color:var(--muted);font-size:clamp(1rem,1.35vw,1.15rem)}
.hero__actions{margin-top:var(--sp-lg);display:flex;gap:var(--sp-sm);flex-wrap:wrap}

/* Verdict legend: the product's real vocabulary, not a mock screenshot */
.legend{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.legend__head{padding:14px var(--sp-md);border-bottom:1px solid var(--line);color:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.verdict{display:grid;grid-template-columns:4px 1fr;gap:0}
.verdict + .verdict{border-top:1px solid var(--line)}
.verdict__rule{background:var(--v)}
.verdict__body{padding:18px var(--sp-md);background:color-mix(in srgb, var(--v) 8%, transparent)}
.verdict__word{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--v)}
.verdict__note{margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.5}

/* ---------- Site foot ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:var(--sp-xl);padding:var(--sp-lg) 0}
.site-foot__in{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-md);flex-wrap:wrap;color:var(--muted);font-size:14.5px}

/* ---------- Fallback content ---------- */
.prose{max-width:68ch;padding:var(--sp-xl) 0}
.prose h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:var(--sp-md)}
.prose p{margin-bottom:var(--sp-md)}
.prose a{color:var(--accent)}

/* ---------- Collapse ---------- */
@media(max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__title{max-width:none}
  .hero__actions{margin-top:var(--sp-md)}
}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--sp-md);top:var(--sp-md);background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:var(--r-sm);z-index:99}