/* ============================================================
   KOTH — tokens.css   ·   "DRAFT 01" Swiss / brutalist system
   ------------------------------------------------------------
   A stark, editorial light theme. Bone paper, near-black ink,
   hairline rules, one vermilion accent. Type is system Helvetica
   (the Swiss typeface) + system monospace — no web-font loading,
   so it renders instantly and behind the strict CSP.

   Token NAMES are intentionally preserved from the old theme so
   inline `var(--x)` references across the markup re-theme for
   free; only the VALUES changed.
   ============================================================ */

:root {
  /* — Paper / surfaces (light) — */
  --black:   #e9e5db;   /* app background ("bone") */
  --surface: #e0dbcf;   /* wells, inputs, avatar backs */
  --card:    #f5f2ec;   /* cards lift above the paper */
  --card-hv: #efebe1;   /* card hover */
  --paper:   #e9e5db;
  --paper-2: #f5f2ec;

  /* — Hairlines — */
  --border:  rgba(20,18,15,0.16);
  --border2: rgba(20,18,15,0.34);
  --rule:    #141210;   /* full-strength ink rule */

  /* — Ink / text — */
  --text:    #141210;
  --sub:     #6a655b;
  --muted:   #a39d8f;

  /* — The one accent — */
  --red:          #ff3b00;   /* vermilion: primary + emphasis */
  --red-dim:      rgba(255,59,0,0.12);
  --accent:       #ff3b00;
  --accent-ink:   #ffffff;

  /* — Functional states (used sparingly, kept legible on paper) — */
  --green:        #0f7a32;
  --green-bright: #138a36;
  --cyan:         #0a6e84;
  --amber:        #a8620a;   /* "gold" — the crown identity */
  --amber-bright: #c2740c;
  --purple:       #5b21b6;

  /* — Type: Helvetica (Swiss) + system mono — */
  --display: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --sans:    'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --body:    'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace;

  /* — Shape: brutalist = no radius — */
  --radius:    0px;
  --radius-sm: 0px;
  --transition: 110ms cubic-bezier(.2,0,0,1);

  /* — Rhythm — */
  --gap:    20px;
  --gap-lg: 40px;
  --shell:  1180px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--body);
  background-color: var(--black);
  /* Subtle Swiss column grid, painted into the body background itself rather
     than a position:fixed overlay — a fixed full-viewport layer repaints on
     every scroll frame (the cause of the scroll jank); this does not. */
  background-image: linear-gradient(90deg, rgba(20,18,15,0.016) 1px, transparent 1px);
  background-size: 84px 100%;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--accent); color: #fff; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--text); border: 3px solid var(--surface); }