/* Design tokens. Everything in here is "this value shows up in ≥2
 * places and a theme change should find all of them at once." One-off
 * values stay inline next to their rule. */

:root {
  /* -------------------------------------------------------------------
   * Typography
   * ------------------------------------------------------------------- */
  /* Single mono stack for the whole UI. Body rule in layout.css makes
   * this the default so components stop re-specifying it. */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Font-size scale. Pick from these; don't hand-roll sizes in
   * components. */
  --text-xs: 11px;  /* meta, captions, ghost buttons */
  --text-sm: 12px;  /* body, banners, secondary text */
  --text-md: 13px;  /* inputs, primary buttons */
  --text-lg: 14px;  /* prominent hints (e.g. interaction hint) */
  --text-xl: 16px;  /* panel titles */

  /* -------------------------------------------------------------------
   * Surfaces — the three background grays that recur
   * ------------------------------------------------------------------- */
  --surface-panel: #1f1f1f;   /* modal / dev-panel backgrounds */
  --surface-input: #111;      /* text input wells */
  --surface-row:   #181818;   /* list rows, entity cards */
  --surface-scrim: rgba(0, 0, 0, 0.75);  /* full-screen modal backdrop */
  --surface-hint:  rgba(0, 0, 0, 0.7);   /* floating hint/toast background */

  /* -------------------------------------------------------------------
   * Color families — one per intent. The accent family is the UI's
   * "primary" and shows up on titles, focus rings, primary buttons.
   * Other families are semantic: you reach for `--color-warning-*`
   * because you're rendering a warning, not because you want amber.
   * ------------------------------------------------------------------- */

  /* Accent (blue) — primary actions, titles */
  --color-accent: #7af;
  --color-accent-fill: #335577;
  --color-accent-border: #557799;

  /* Text */
  --color-text: #ddd;
  --color-text-muted: #888;
  --color-text-strong: #eee;

  /* Borders */
  --color-border: #555;
  --color-border-subtle: #333;

  /* Error (red) — field errors, failed network calls */
  --color-error: #f88;

  /* Info (cyan) — neutral success/informational */
  --color-info:        #8dd;
  --color-ghost-fg:    rgba(255, 255, 255, 0.72);   /* off-white link-style buttons */
  --color-ghost-hover: #fff;

  /* Success (green) — "active"/"selected" states */
  --color-success-border: #99bb66;
  --color-success-fill-a: rgba(139, 190, 98, 0.22);
  --color-success-fill-b: rgba(225, 241, 167, 0.12);

  /* Warning (amber) — email-verification nag, future "session expires soon" */
  --color-warning-fg:     #f3d084;
  --color-warning-border: #c28a30;
  --color-warning-bg:     rgba(26, 22, 12, 0.92);
  --color-warning-hover:  rgba(194, 138, 48, 0.15);

  /* Danger (red) — destructive actions (delete thumb in placement panel) */
  --color-danger-fg:     #cc6666;
  --color-danger-border: #884444;
  --color-danger-bg:     rgba(120, 40, 40, 0.2);

  /* Trigger (purple) — portal_trigger ghost + palette icon. Matches the
   * in-world render tint so the editor icon reads as "the thing you're
   * placing." */
  --color-trigger-fill:   rgba(170, 80, 230, 0.35);
  --color-trigger-border: #9c5ed4;

  /* -------------------------------------------------------------------
   * Geometry
   * ------------------------------------------------------------------- */
  /* Tron/synthwave: subtle rounding on outlined elements. Still small
   * enough that the UI reads as geometric, not bubbly. */
  --radius-sm: 4px;

  /* -------------------------------------------------------------------
   * Layering — panels above canvas, hints above panels, modals on top
   * ------------------------------------------------------------------- */
  --z-panel: 120;
  --z-hint:  150;
  --z-modal: 200;
}