/*
 * Design tokens — the single source of truth for the Control Room's visual
 * language (colors, borders, shadows, type, motion, z-index, shell layout).
 *
 * Visual direction: minimalist neobrutalist "digital paper" — a light,
 * warm paper background, near-black ink borders on every block-level
 * surface, hard offset (non-blurred) shadows instead of soft elevation,
 * zero border-radius, a pixel display face for titles/labels paired with
 * a monospace "typewriter" body face.
 *
 * To redesign the app, edit values here. Nothing downstream (base.css,
 * primitives.css, layout.css, modules/*.css) should hardcode a color, a
 * border width, a radius, a font stack, a shadow, a duration, or a
 * z-index — it should reference one of these variables instead.
 */

:root {
  /* Surfaces — warm paper, not white-white */
  --bg: #f3ede0;
  --card: #fffdf7;
  --card-2: #e9e1cc;
  --console-bg: #0b0f16; /* terminal window: a "screen" cut into the paper */
  --console-header-bg: #0d131c;
  --console-deep-bg: #0a0e14;

  /* Text for use INSIDE the dark console/log panels above — the main
     --text/--secondary/--tertiary tokens are dark ink for the light paper
     theme and are invisible here. */
  --console-text: #e8e3d3;
  --console-text-secondary: #9c9686;
  --console-text-tertiary: #6b6656;
  --console-accent: #6ea8ff;
  --console-danger: #ff6f6f;
  --console-border: #2d3748;
  --console-hairline: rgba(255, 255, 255, 0.04);
  --console-scrim: rgba(255, 255, 255, 0.06);

  /* Ink */
  --ink: #16140f;
  --border: var(--ink);

  /* Text */
  --text: var(--ink);
  --text-secondary: #55503f;
  --text-tertiary: #857f68;

  /* Brand */
  --accent: #2451e6;
  --accent-hover: #17399e;

  /* Semantic status — text-safe (readable as foreground text on paper) */
  --success: #167c3d;
  --warning: #9a6300;
  --danger: #c81e1e;
  --danger-soft-text: var(--danger);

  /* Semantic status — bold "sticker" fills, paired with --ink text */
  --success-fill: #63e693;
  --warning-fill: #ffd23f;
  --danger-fill: #ff6f6f;

  /* Composed surfaces */
  --surface-topbar: var(--card);
  --surface-bottomnav: var(--card);
  --overlay-hairline: rgba(20, 18, 12, 0.04);
  --overlay-scrim: rgba(20, 18, 12, 0.06);

  /* Extended categorical palette — bold sticker colors for module UIs that
     need more hues than the three status colors (tiers, tags, metrics).
     Always pair with --ink text, never white. */
  --cat-cyan: #5fe0f2;
  --cat-emerald: #63e693;
  --cat-violet: #b9a3ff;
  --cat-blue-soft: #9dbcff;
  --cat-purple-soft: #d2bfff;
  --cat-green-soft: #a6f0bc;
  --cat-orange-soft: #ffc48a;
  --cat-yellow: #ffd23f;
  --cat-yellow-soft: #ffe08a;
  --cat-sky-soft: #b6e6ff;
  --cat-neutral-soft: #d8d2bd;
  --cat-fog: #e9e5d6;
  --cat-amber-soft: #ffdf9e;

  /* Radius — flattened to 0 across the board for the pixelated/brutalist
     look. Kept as named tokens (rather than hardcoding 0 in every file) so
     the whole app can be softened again by editing only this block; the
     "pill" token is intentionally flat here too, so chips read as sharp
     rectangular tags rather than rounded pills. */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  /* Borders — one consistent hard-edged weight, brutalist-style */
  --border-width: 3px;
  --border-width-sm: 2px;

  /* Shadows — hard offset blocks, no blur */
  --shadow-brutal-sm: 2px 2px 0 var(--ink);
  --shadow-brutal: 4px 4px 0 var(--ink);
  --shadow-brutal-lg: 6px 6px 0 var(--ink);
  --shadow-md: var(--shadow-brutal);

  /* Typography */
  --font-sans: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-pixel: "Press Start 2P", var(--font-mono);

  /* Motion */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 200ms;
  --press-offset: 2px;

  /* Z-index scale, low to high */
  --z-pull-indicator: 15;
  --z-chrome: 20;
  --z-banner: 40;
  --z-toast: 50;

  /* App shell layout */
  --topbar-height: 56px;
  --agent-status-height: 32px;
  --bottomnav-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}