/* Netra — shared tokens and base type. Loaded by the landing page and the app. */

:root{
  color-scheme: dark;
  --bg:#060e0b; --bg2:#0a1611; --panel:#0c1a14; --line:#172c22; --line2:#1f3a2d;
  --ink:#e9f1ec; --mid:#9db3a7; --dim:#6b8579; --faint:#486055;
  --accent:#3ab77e; --accent-dim:#2f9e6b; --warn:#e0a355; --bad:#e8796c; --info:#6ea8d8;
  --lede:#c3d4ca; --headbg:rgba(6,14,11,.9); --code:#08120e;
  --tint:rgba(58,183,126,.09); --tint-soft:rgba(58,183,126,.08);
  --okline:rgba(58,183,126,.4); --warnline:rgba(224,163,85,.4); --badline:rgba(232,121,108,.4);
  --on-accent:#04120c;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f8faf9; --bg2:#eef3f0; --panel:#ffffff; --line:#dee7e2; --line2:#c6d6cd;
  --ink:#0d1a14; --mid:#43574d; --dim:#6a8074; --faint:#8b9f95;
  --accent:#1b7a4f; --accent-dim:#12613c; --warn:#9a6011; --bad:#b23c2c; --info:#26689e;
  --lede:#2d423a; --headbg:rgba(248,250,249,.92); --code:#f1f6f3;
  --tint:rgba(27,122,79,.09); --tint-soft:rgba(27,122,79,.07);
  --okline:rgba(27,122,79,.42); --warnline:rgba(154,96,17,.42); --badline:rgba(178,60,44,.42);
  --on-accent:#ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h2{font-size:30px;line-height:1.25;font-weight:600;margin:0 0 14px;letter-spacing:-.015em}
h3{font-size:17px;font-weight:600;margin:0 0 8px}
p{margin:0 0 16px;color:var(--mid);max-width:74ch}
a{color:var(--accent)}
.lede{font-size:18px;color:var(--lede)}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;font-weight:600}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);text-align:right;white-space:nowrap}

/* ---------- top bar ---------- */
header{position:sticky;top:0;z-index:50;background:var(--headbg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{max-width:1120px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mark{display:flex;align-items:baseline;gap:11px;text-decoration:none;color:inherit}
.mark b{font-size:17px;letter-spacing:.18em;font-weight:600}
.mark span{font-size:11px;color:var(--dim)}
.bar nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.bar nav a{font-size:13px;color:var(--mid);text-decoration:none}
.bar nav a:hover{color:var(--accent)}
.pill{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:20px;
      border:1px solid var(--line2);color:var(--dim)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:9px;border:1px solid var(--line2);
     background:var(--panel);color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--on-accent)}
.btn.small{padding:6px 11px;font-size:12.5px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- chips ---------- */
.chip{display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;
      border-radius:5px;border:1px solid var(--line2);color:var(--dim);white-space:nowrap}
.chip.ok{border-color:var(--okline);color:var(--accent)}
.chip.soft{border-color:var(--warnline);color:var(--warn)}
.chip.claim{border-color:var(--badline);color:var(--bad)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
td strong{color:var(--ink);font-weight:600}

/* ---------- theme toggle ---------- */
.themetog{background:none;border:1px solid var(--line2);color:var(--mid);border-radius:20px;
          padding:5px 12px;font:inherit;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:7px}
.themetog:hover{color:var(--accent);border-color:var(--accent)}
.themetog svg{width:13px;height:13px;fill:currentColor}
.themetog .sun{display:none}
:root[data-theme="light"] .themetog .sun{display:block}
:root[data-theme="light"] .themetog .moon{display:none}