/* tokens.css — the maistro-cloud design system (MV2-CLOUD-SHELL-DESIGN).
 *
 * Direction B "Deep Field", picked by Samer 2026-07-25 from three mockups
 * (cloud/static/mockups/ — the design record): deep-space blue, soft layered
 * depth, the brand blue→violet gradient as THE accent, glass-like surfaces.
 *
 * RULES (enforced by tests/shell_design_test.py):
 *  - This file is the ONLY place raw colors and px values may appear.
 *  - Every shell page consumes these custom properties via shell.css classes —
 *    zero page-local styling forks.
 *  - Card 33 vendors this file into the engine (home + board chrome) — keep
 *    property NAMES stable; changing a VALUE restyles every surface at once.
 *
 * name → role:
 *  --mc-bg / --mc-bg-2      page background (deep) / raised background
 *  --mc-bg-wash             the page's radial backdrop (login, home)
 *  --mc-surface             translucent card/panel fill (glass)
 *  --mc-surface-solid       opaque panel fill (menus, chips)
 *  --mc-text / --mc-muted   primary / secondary ink
 *  --mc-hairline            1px-class borders and rules
 *  --mc-hairline-w          the border width itself
 *  --mc-accent / --mc-accent-2  brand pair (blue → violet)
 *  --mc-accent-grad         the brand gradient (buttons, orb)
 *  --mc-on-accent           text ON the gradient — white in BOTH themes (2026-08-22: the
 *                           light theme's dark --mc-text on the gradient was unreadable)
 *  --mc-glow                accent halo (focus rings, shadows)
 *  --mc-danger / --mc-success   error ink / positive state
 *  --mc-font / --mc-font-mono   UI stack / metadata stack (system, no CDN)
 *  --mc-fs-*                type scale (sm / base / lg / xl)
 *  --mc-sp-*                spacing scale 1..6 (4 8 12 16 24 32)
 *  --mc-r-sm/-r/-r-lg/-r-pill   radii
 *  --mc-shadow / --mc-shadow-soft / --mc-shadow-accent   depth
 *  --mc-tr                  standard transition
 *  --mc-side-w / --mc-side-rail   sidebar width open / collapsed icon rail
 *                           (MV2-SHELL-SIDEBAR — variant A, Samer's pick)
 *  --mc-icon                nav icon square
 *  --mc-navmark             active-entry accent bar width
 *  --mc-logo-chip / --mc-logo-h   the white chip behind the (opaque-white)
 *                           logo.png + the logo's rendered height
 */
:root {
  --mc-bg: #0c1120;
  --mc-bg-2: #0f1730;
  --mc-bg-wash: radial-gradient(1100px 500px at 75% -10%, #1b2a55 0%, #0f1730 45%, #0c1120 100%);
  --mc-surface: rgba(23, 32, 58, .72);
  --mc-surface-solid: #171f38;
  --mc-text: #e9edfa;
  --mc-muted: #94a0c4;
  --mc-hairline: rgba(148, 160, 196, .16);
  --mc-hairline-w: 1px;
  --mc-accent: #4f7bff;
  --mc-accent-2: #8b5cf6;
  --mc-accent-grad: linear-gradient(90deg, #4f7bff, #8b5cf6);
  --mc-accent-grad-tilt: linear-gradient(135deg, #4f7bff, #8b5cf6); --mc-on-accent: #ffffff;
  --mc-glow: rgba(79, 123, 255, .28);
  --mc-danger: #ff7089;
  --mc-warn: #d29922;   /* license-expiry banner (MV2-SH-LICENSE) */
  --mc-success: #4cd9a0;
  --mc-success-glow: rgba(76, 217, 160, .7);
  --mc-font: system-ui, "Segoe UI", sans-serif;
  --mc-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --mc-fs-sm: .76rem;
  --mc-fs-base: .92rem;
  --mc-fs-lg: 1.08rem;
  --mc-fs-xl: 1.35rem;
  --mc-sp-1: 4px;
  --mc-sp-2: 8px;
  --mc-sp-3: 12px;
  --mc-sp-4: 16px;
  --mc-sp-5: 24px;
  --mc-sp-6: 32px;
  --mc-r-xs: 6px;   /* 2026-08-31: the dark brand's corner (Samer's pick) */
  --mc-r-sm: 10px;
  --mc-r: 14px;
  --mc-r-lg: 18px;
  --mc-r-pill: 99px;
  --mc-blur: 8px;
  --mc-lift: -1px;
  --mc-shadow: 0 18px 50px rgba(4, 8, 20, .55);
  --mc-shadow-soft: 0 8px 26px rgba(4, 8, 20, .35);
  --mc-shadow-accent: 0 8px 24px var(--mc-glow);
  --mc-tr: .12s ease;
  --mc-side-w: 232px;
  --mc-side-rail: 56px;
  --mc-icon: 18px;
  --mc-navmark: 3px;
  --mc-logo-chip: #ffffff;
  --mc-logo-h: 26px;
}

/* ── the light theme (2026-08-13, the board v3.45 wave) ─ GitHub-like. Dark
 *  stays the default; html.light is applied PRE-PAINT from
 *  localStorage("maistroTheme") — the same key the board uses, so the whole
 *  product switches together. The tokens law holds — these are the ONLY
 *  light color definitions (no literal outside this file). ── */
html.light {
  --mc-bg: #f6f8fa;
  --mc-bg-2: #ffffff;
  --mc-bg-wash: #f6f8fa;
  --mc-surface: rgba(255, 255, 255, .85);
  --mc-surface-solid: #f6f8fa;
  --mc-text: #24292f;
  --mc-muted: #57606a;
  --mc-hairline: #d0d7de;
  --mc-accent: #0969da;
  --mc-accent-2: #8250df;
  --mc-accent-grad: linear-gradient(90deg, #0969da, #8250df);
  --mc-accent-grad-tilt: linear-gradient(135deg, #0969da, #8250df); --mc-on-accent: #ffffff;
  --mc-glow: rgba(9, 105, 218, .22);
  --mc-danger: #cf222e;
  --mc-warn: #9a6700;   /* license-expiry banner (MV2-SH-LICENSE) */
  --mc-success: #1a7f37;
  --mc-success-glow: rgba(26, 127, 55, .4);
  --mc-shadow: 0 8px 24px rgba(140, 149, 159, .2);
  --mc-shadow-soft: 0 3px 12px rgba(140, 149, 159, .15);
  --mc-shadow-accent: 0 4px 14px rgba(9, 105, 218, .22);
}