/* Somnia design system - token override layer.
 *
 * style.css/infofi.css/infofi.js stay byte-for-byte diffable against the
 * ShinyLuck upstream (see their own file headers). This file loads LAST and
 * only redefines the :root custom properties they already read, mapping the
 * REAL Dreams UI tokens (Somnia's actual design system, fetched live from
 * https://ui.somnia.network/r/theme.json - not approximated) onto
 * ShinyLuck's existing token names:
 *   bg = --surface-page #000000, panel = --surface-default #141414,
 *   panel-3 = --surface-raised #1c1c1c, line/border = --border-default
 *   #1c1c1c / --border-strong #2f2f2f, fg-strong = --text-heading #f5f5f5,
 *   fg = --text-body #d3d3d3, fg-mute = --text-muted #999999, fg-faint =
 *   --text-subtle #666666, semantic ok/warn/bad = the real solid button
 *   surfaces --surface-success-btn #00fa89 / --surface-warning-btn #ff7a00 /
 *   --surface-error-btn #dc0b4a (these already matched literal rgba()
 *   values baked into app.css's badge rules, untouched from upstream -
 *   confirms the app already assumed real-brand hex here).
 * The accent is Dreams UI's real --accent-primary, #771be8 - a purple, not
 * a substitute hue. A prior pass here repainted it white on the mistaken
 * premise that the brand has no purple; the live theme.json disagrees, and
 * ShinyLuck's own gold ramp already occupies the same --gold-* slots this
 * purple now fills, so the diff stays contained to token values.
 * The treemap tile colors in infofi.js/.if-key .sw.project are the real
 * accent-primary #771be8 too - see infofi.js's header for the accessibility
 * math (unchanged: dE-validated against black and against voice's teal).
 * design-standard.md has the full spec + a living-tokens addendum. */

:root {
  --bg: #000000;
  --bg-2: #000000;
  --panel: #141414;
  --panel-2: #141414;
  --panel-3: #1c1c1c;
  --line: #1c1c1c;
  --line-3: #2f2f2f;
  --bd: #1c1c1c;
  --bd-2: #1c1c1c;
  --bd-3: #2f2f2f;

  --fg: #d3d3d3;
  --fg-strong: #f5f5f5;
  --fg-dim: #d3d3d3;
  --fg-mute: #999999;
  --fg-faint: #666666;
  --fg-ghost: #666666;

  /* semantic - status only, never decorative. Real Dreams UI solid button
     surfaces, not approximated. */
  --green: #00fa89;
  --red: #dc0b4a;
  --amber: #ff7a00;

  /* the real Dreams UI accent - --accent-primary #771be8 and its ramp
     (deep-purple-200/300 for hover/mid, --surface-action for solid fills) -
     repointed onto the --gold-* names style.css/app.css/infofi.css already
     read for buttons/highlights/links */
  --gold: #771be8;
  --gold-hi: #aa75ff;
  --gold-mid: #8e47ff;
  --gold-dark: #5c16cc;
  --ink: #000000;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: var(--font-source-code-pro), ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --radius: 12px;
}

html, body { background: var(--bg); }
body { font-family: var(--sans); }

.wrap { border-radius: 0; }
::selection { background: rgba(245,245,247,.16); }
::-webkit-scrollbar-thumb { background: var(--bd-2); border: 2px solid #000; }

/* --- typography: monospace carries the identity --- */
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; letter-spacing: -.01em; }

.stat-label, .card-title, .section-title, .rep-card-label, .field-label {
  font-family: var(--mono);
  letter-spacing: .16em;
}
.stat-value, .rep-card-value, .pill, .badge, .tier-pill, .rep-amt, .somi-amt {
  font-variant-numeric: tabular-nums;
}

/* --- tighter, more measured radii ("no rounded-everything") --- */
.card, .stat-card, .rep-card, .auth-card, .mock-panel, .mcard {
  border-radius: var(--radius);
}
.btn-primary, .btn-ghost, .btn-discord, .btn-danger,
button, .field-input, form.create input, form.create select, form.create textarea {
  border-radius: 8px;
}

/* --- accent buttons: flat purple fill, not a gold gradient. Matches Dreams
   UI's real "brand" button variant (bg-surface-action, --surface-action
   #5c16cc) - solid, no gradient, confirmed against the live button.json. --- */
button.gold {
  background: var(--gold-dark);
  color: var(--fg-strong);
  background-image: none;
}
button.gold:hover { background: var(--gold-mid); }

/* infofi.css stays byte-for-byte diffable against the ShinyLuck upstream (see
   its own header), so this can't live there: .if-title/.if-meta render
   directly over the dot-matrix canvas with no card behind them, and a small
   grey mono label is the first thing to wash out against moving dots. A dark
   shadow keeps them legible regardless of how the animation gets tuned. */
.if-title, .if-meta { text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6); }