/* ============================================================
   ReviewBot tokens. Shared by the public site and the portal.
   Token names follow the WebEnvy operator vocabulary.
   Colours are adaptive: never use a literal colour outside this file.
   ============================================================ */

:root {
  color-scheme: light dark;

  --ink: #14181F;
  --ink-muted: #5B6472;
  --ink-faint: #8A929E;
  --accent: #2B59C3;
  --accent-dark: #1F449B;
  --accent-ink: #FFFFFF;
  --accent-soft: #EAF0FB;
  --urgent: #8B2E2E;
  --urgent-soft: #F5E6E6;
  --warn: #8A5300;
  --warn-soft: #FBF0DD;
  --ok: #1D6E48;
  --ok-soft: #E5F4EC;
  --info: #2C5C8A;
  --info-soft: #ECF1F6;
  --rule: #C9CED6;
  --rule-soft: #DDE1E7;
  --rule-faint: #EEF0F3;
  --surface-1: #FFFFFF;
  --surface-2: #F6F7F9;
  --surface-3: #EEF0F3;
  --surface: var(--surface-1);
  --link-hover: var(--accent-dark);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --type-display: 40px;
  --type-h1: 28px;
  --type-h2: 22px;
  --type-h3: 18px;
  --type-body: 16px;
  --type-secondary: 14px;
  --type-caption: 12px;
  --type-kicker: 11px;
  --lh-tight: 1.2;
  --lh-normal: 1.5;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;

  --border: 1px solid var(--rule);
  --border-soft: 1px solid var(--rule-soft);
  --border-faint: 1px solid var(--rule-faint);
  --measure: 68ch;
  --page: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E7EAF0;
    --ink-muted: #A3ACBA;
    --ink-faint: #7A8392;
    --accent: #7EA2FF;
    --accent-dark: #A9C0FF;
    --accent-ink: #0F1217;
    --accent-soft: #1D2533;
    --urgent: #F08A8A;
    --urgent-soft: #2E1A1A;
    --warn: #F0B35A;
    --warn-soft: #2C2213;
    --ok: #5FD19B;
    --ok-soft: #15291F;
    --info: #8DB8E8;
    --info-soft: #172331;
    --rule: #3A414D;
    --rule-soft: #2A303A;
    --rule-faint: #20252D;
    --surface-1: #0F1217;
    --surface-2: #171B22;
    --surface-3: #1E232C;
  }
}

:root[data-theme="dark"] {
  --ink: #E7EAF0;
  --ink-muted: #A3ACBA;
  --ink-faint: #7A8392;
  --accent: #7EA2FF;
  --accent-dark: #A9C0FF;
  --accent-ink: #0F1217;
  --accent-soft: #1D2533;
  --urgent: #F08A8A;
  --urgent-soft: #2E1A1A;
  --warn: #F0B35A;
  --warn-soft: #2C2213;
  --ok: #5FD19B;
  --ok-soft: #15291F;
  --info: #8DB8E8;
  --info-soft: #172331;
  --rule: #3A414D;
  --rule-soft: #2A303A;
  --rule-faint: #20252D;
  --surface-1: #0F1217;
  --surface-2: #171B22;
  --surface-3: #1E232C;
}

/* ----- base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
p { margin: 0 0 var(--space-4); }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.is-hidden { display: none !important; }
.kicker {
  font-size: var(--type-kicker); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-bottom: var(--space-2);
}
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----- brand ----------------------------------------------- */
.brand { display: inline-flex; align-items: baseline; gap: var(--space-2); color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand__mark { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.brand__mark::first-letter { color: var(--accent); }
.brand__chip {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
  border: var(--border-soft); padding: 1px 5px; border-radius: var(--radius-sm); background: var(--surface-1);
}

/* ----- buttons --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: inherit; font-size: var(--type-secondary); font-weight: 550;
  padding: 9px 16px; border-radius: var(--radius); border: var(--border);
  background: var(--surface-1); color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--surface-3); text-decoration: none; color: var(--ink); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-ink); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--sm { padding: 5px 10px; font-size: var(--type-caption); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ----- pills ----------------------------------------------- */
.pill {
  display: inline-block; font-size: var(--type-caption); font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px; border: var(--border-soft);
  background: var(--surface-2); color: var(--ink-muted); white-space: nowrap;
}
.pill--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill--ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill--info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.pill--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill--urgent { background: var(--urgent-soft); color: var(--urgent); border-color: transparent; }
.pill--ghost { background: transparent; }