/* i2xp — the look pack: the brand stylesheet for the information site (i2xp.com).

   Self-contained: fonts are SAME-ORIGIN woff2, no external requests, CSP-safe, offline-ok. It serves
   at /look/i2xp.css (fonts at /look/fonts/); the @font-face url() is RELATIVE (url('fonts/…')), so the
   browser resolves the fonts against the stylesheet's own location — no absolute path to keep in sync.

   Swiss Modernist · white-dominant · absolute monochrome. No blue, no green. The ONLY chromatic
   token is --error, reserved strictly for genuine error feedback on interactive forms (a
   deliberate, minimal exception to the monochrome rule for accessibility — STYLE.md §2). Dark
   mode is a derived monochrome inverse: the guide is white-dominant, but no surface loses the
   dark UI it already had. */

/* ---- fonts: latin-subset, weight-axis variable woff2 (Inter 100–900, Space Grotesk 300–700) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk.woff2') format('woff2');
}

/* ---- design tokens (STYLE.md §2) ---- */
:root {
  color-scheme: light dark;

  /* core palette — warm alabaster canvas, monochrome ink */
  --canvas:  #FAF9F6;   /* primary background (warm alabaster white) */
  --surface: #FFFFFF;   /* structural containers, sticky header, drawers */
  --ink:     #111111;   /* display titles, primary text, dark action buttons */
  --muted:   #666666;   /* body copy, secondary descriptions */
  --subtle:  #999999;   /* metadata, index numbers, passive icons */
  --line:    #E5E4DF;   /* keyline dividers, grid lines, borders */
  --dark:    #171717;   /* active/hover for solid buttons */

  /* the one functional accent — errors ONLY, never decoration (STYLE.md §2) */
  --error:   #B23B3B;

  /* button ink-on-canvas pair (kept as tokens so dark mode can flip them) */
  --on-ink:  var(--canvas);   /* text on a solid ink button */

  /* type (STYLE.md §3): Inter editorial/body, Space Grotesk protocol/code */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Space Grotesk', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* structure */
  --measure: 42rem;                       /* main reading measure */
  --grid: rgba(229, 228, 223, 0.35);      /* 40px Swiss background grid */
  --radius: 10px;

  /* legacy aliases — so surface CSS written against the old token names keeps resolving while
     it migrates. Prefer the semantic names above in new rules. */
  --bg: var(--canvas);
  --panel: var(--surface);
  --pan: var(--surface);
  --fg: var(--ink);
  --mut: var(--muted);
  --err: var(--error);
}

/* dark mode — a monochrome inverse (kept per decision; the guide itself is white-dominant) */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:  #131316;
    --surface: #1C1C20;
    --ink:     #ECECEA;
    --muted:   #9B9A95;
    --subtle:  #6E6D68;
    --line:    #2B2B30;
    --dark:    #2A2A30;
    --error:   #E58A8A;
    --on-ink:  #131316;
    --grid: rgba(120, 120, 128, 0.14);
  }
}

/* ============================================================ base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* monochrome selection + scrollbars (STYLE.md §2) */
::selection { background: var(--ink); color: var(--canvas); }
* { scrollbar-color: #D4D4D0 var(--canvas); }
@media (prefers-color-scheme: dark) { * { scrollbar-color: #3A3A40 var(--canvas); } }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: #D4D4D0; border-radius: 999px; border: 3px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }
@media (prefers-color-scheme: dark) { ::-webkit-scrollbar-thumb { background: #3A3A40; } }

/* links — monochrome: muted → ink on hover, never a default blue (STYLE.md §2, §7) */
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* headings (STYLE.md §3 type hierarchy) */
h1, h2, h3, h4 { font-family: var(--sans); color: var(--ink); }
h1 { font-weight: 300; letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-weight: 400; letter-spacing: -0.02em; }
h3 { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; }

code, .mono, .term { font-family: var(--mono); font-size: 0.9em; }
.term { color: var(--ink); font-weight: 600; }

/* the reading column + a section keyline rhythm */
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }

/* ============================================================ primitives */

/* labels & badges — Space Grotesk, uppercase, widely tracked (STYLE.md §3) */
.kicker, .badge, .label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--subtle);
  font-size: 0.72rem;
  font-weight: 500;
}
.kicker { color: var(--muted); letter-spacing: 0.16em; font-size: 0.82rem; }

/* buttons — solid ink is the primary; the secondary is a keyline. No accent fills (STYLE.md §5B) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.5rem; border-radius: var(--radius);
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn-primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn-primary:hover { background: var(--dark); text-decoration: none; }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink); text-decoration: none; }

/* native button/input elements used by the app surfaces (door, wall) */
button {
  font: inherit; font-weight: 600;
  padding: 0.55rem 1.1rem; border-radius: 7px; cursor: pointer;
  color: var(--on-ink); background: var(--ink); border: 1px solid var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
button:hover { background: var(--dark); }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.ghost:hover { border-color: var(--ink); background: transparent; }

label { display: block; font-size: 0.82rem; color: var(--muted); margin: 0.6rem 0 0.2rem; }
input, textarea, select {
  width: 100%; padding: 0.5rem 0.6rem; font: inherit;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); }

/* cards & panels — keyline containers, no drama shadows (STYLE.md §1.4, §5) */
.card, .panel {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.2rem; background: var(--surface);
}
.card h3, .panel h3 { margin: 0 0 0.4rem; }

/* terminal / quickstart block (STYLE.md §5B) */
pre, .terminal {
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.7;
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; color: var(--ink);
}
pre:hover, .terminal:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }

/* keyline divider */
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* status messages — monochrome, EXCEPT genuine errors (the one functional accent) */
.msg { font-size: 0.9rem; }
.msg.ok { color: var(--muted); }        /* success = muted micro-text, per the guide */
.msg.err { color: var(--error); }        /* the single deliberate exception */

/* tables (vocabulary, metadata) — Swiss keyline grid */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 30rem; }
th, td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--muted); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono); }
tbody tr:last-child td { border-bottom: 0; }