/* ============================================================
   Design tokens - "Atrium". Every color, size, radius, shadow,
   blur, opacity, and timing value the dashboard uses is defined
   here as a CSS custom property. Page and component styles only
   ever read these names; change the look by changing a token.

   Two themes, one semantic token set:
     Light  - [data-theme="white"]
     Dark   - [data-theme="black"]  (the legacy "default" value the
              backend still accepts renders as Dark, same block)
   "System" is not a third palette: an inline script in base.html's
   <head> resolves prefers-color-scheme to white/black before first
   paint (and follows live OS changes), so there is never a flash and
   never a duplicated palette to keep in sync.
   ============================================================ */

:root {
  /* ---- typography ---------------------------------------------------- */
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale: label -> body -> heading -> display */
  --text-2xs: 11px;      /* eyebrows, nav group labels, micro-captions */
  --text-xs: 12px;       /* labels, hints, chips, table heads */
  --text-sm: 13px;       /* dense UI body, buttons, nav */
  --text-base: 14px;     /* body */
  --text-md: 16px;       /* card titles, large inputs */
  --text-lg: 18px;       /* section headings */
  --text-xl: 22px;       /* page titles, hero headline */
  --text-2xl: 28px;      /* stat values */
  --text-3xl: 40px;      /* display (login, hero state) */
  --text-4xl: 56px;      /* hero numbers, login headline */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.1em;

  --measure: 68ch;       /* max readable line length for prose/help text */

  /* ---- spacing (4px grid) ------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- sizing ------------------------------------------------------- */
  --border-w: 1px;
  --border-w-thick: 2px;
  --control-h-xs: 24px;
  --control-h-sm: 30px;
  --control-h: 38px;
  --control-h-lg: 44px;
  --control-h-touch: 52px;
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 28px;
  --dot-sm: 6px;
  --dot-md: 8px;
  --dot-lg: 10px;
  --ring-size: 112px;
  --ring-stroke: 8px;
  --progress-h: 6px;
  --progress-h-thin: 4px;
  --sparkline-h: 40px;
  --tile-accent-h: 2px;
  --switch-w: 40px;
  --switch-h: 24px;
  --switch-knob: 20px;

  /* ---- radii: tighter inside, softer outside ------------------------ */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ---- opacity ------------------------------------------------------ */
  --opacity-disabled: 0.5;
  --opacity-muted: 0.72;
  --opacity-stale: 0.45;
  --opacity-hover-tint: 0.06;
  --opacity-ambient: 0.75;

  /* ---- blur --------------------------------------------------------- */
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 14px;
  --blur-lg: 20px;
  --blur-xl: 32px;

  /* ---- motion: transform/opacity only, short - the encoder has CPU
     priority over the UI's own decoration ---------------------------- */
  --duration-instant: 90ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;
  --duration-pulse: 2400ms;
  --duration-shimmer: 1500ms;
  --duration-spin: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* arrivals */
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);          /* departures */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* state morphs */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);    /* pops, toggles */
  --stagger-step: 45ms;
  --lift-y: -2px;
  --press-scale: 0.97;
  --enter-y: 10px;

  /* ---- layout ------------------------------------------------------- */
  --sidebar-w: 252px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
  --shell-gap: 16px;
  --content-max-w: 1400px;
  --mobile-bar-h: 76px;

  /* ---- z-index ------------------------------------------------------ */
  --z-base: 1;
  --z-raised: 2;
  --z-sticky: 10;
  --z-drawer: 40;
  --z-dropdown: 50;
  --z-toast: 100;
  --z-modal: 200;

  /* ---- device-black: a video/VNC canvas is a device surface, not a
     themed one - shared unchanged by every theme ---------------------- */
  --canvas-black: #000000;

  /* ---- log/terminal surface: deliberately theme-invariant (always a
     dark monospace panel, like every other terminal/log UI). Checked
     for AA on its own in scripts/check-contrast.py ------------------- */
  --term-bg: #0b0808;
  --term-bg-2: #130e0e;
  --term-border: #261c1b;
  --term-text: #e6dcda;
  --term-dim: #a0928f;
  --term-line-no: #7d6f6c;
  --term-err: #ff8f8f;
  --term-warn: #ffcf7a;
  --term-info: #e9c98f;
  --term-ok: #6ee7b0;
  --term-hl: rgba(233, 201, 143, 0.22);

  /* ---- scrim: modal/drawer backdrop dimming, same across themes ----- */
  --scrim: rgba(11, 6, 6, 0.64);
  --scrim-strong: rgba(11, 6, 6, 0.82);
  --on-media: #ffffff;   /* text/icons drawn over video or media */

  /* ---- media chrome: anything drawn over video/black (monitor bezels,
     overlays on a preview, on-canvas chips). Theme-invariant because
     the video underneath is. -------------------------------------------- */
  --media-ink: #070505;
  --media-ink-2: #0f0b0b;
  --media-scrim: rgba(0, 0, 0, 0.55);
  --media-scrim-strong: rgba(0, 0, 0, 0.82);
  --media-panel: rgba(18, 12, 12, 0.82);
  --media-fill-faint: rgba(255, 255, 255, 0.05);
  --media-line: rgba(255, 255, 255, 0.08);
  --media-glass-border: rgba(255, 255, 255, 0.16);
  --media-text-dim: rgba(255, 255, 255, 0.64);
  --media-text-faint: rgba(255, 255, 255, 0.42);
  --media-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(0, 0, 0, 0.5);
  --media-fade-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  --media-fade-bottom: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  --key-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* ================================================================
   "Oxblood" identity (2026-11). Deep crimson brand, warm near-black and
   warm paper neutrals, one champagne accent.
     --accent / --accent-solid   brand crimson (text/ring vs. fill)
     --champagne                 the single subtle accent
     --live                      ON-AIR: an orange-leaning scarlet, a
                                 different hue family from the brand,
                                 always paired with a pulsing dot + label
     --danger                    Failed / error: a lighter rose, shown as
                                 an OUTLINE with an icon - never a fill,
                                 never pulsing
   Success stays green, warning amber. Contrast pairs are checked in
   scripts/check-contrast.py.
   ================================================================ */

/* ---- Light - warm paper, clean white surfaces, ox-blood ink accents */
:root[data-theme="white"],
:root:not([data-theme]) {
  --bg: #fbf7f6;
  --surface: #ffffff;
  --surface-2: #f8f2f0;
  --bg-panel: var(--surface);
  --bg-elevated: var(--surface);
  --bg-sunken: #f3ebe9;
  --bg-hover: #f5eeec;
  --bg-active: #ece1de;
  --border: #ebe0de;
  --border-strong: #d6c6c2;

  --text: #1c1413;
  --text-dim: #5f5250;
  --text-faint: #6e605e;
  --text-on-accent: #ffffff;

  --accent: #b50e28;
  --accent-solid: #c8102e;
  --accent-solid-hover: #a80d25;
  --accent-deep: #8e0b21;
  --accent-tint: rgba(200, 16, 46, 0.08);
  --accent-tint-strong: rgba(200, 16, 46, 0.16);
  --accent-ring: rgba(200, 16, 46, 0.72);
  --accent-glow: rgba(200, 16, 46, 0.4);

  --champagne: #7a5a1e;
  --champagne-tint: rgba(122, 90, 30, 0.12);

  --live: #b93000;
  --live-solid: #ff4d2e;
  --live-solid-hover: #ff6a45;
  --on-live: #1a0603;
  --live-tint: rgba(255, 77, 46, 0.14);
  --live-glow: rgba(255, 77, 46, 0.45);
  --danger: #a30d24;
  --danger-solid: #a30d24;
  --danger-tint: rgba(163, 13, 36, 0.09);

  --success: #0f6b40;
  --success-tint: rgba(15, 107, 64, 0.1);
  --success-glow: rgba(15, 107, 64, 0.28);
  --warning: #8a5a00;
  --warning-tint: rgba(138, 90, 0, 0.1);
  --warning-glow: rgba(138, 90, 0, 0.28);
  --info: #7a5a1e;
  --info-tint: rgba(122, 90, 30, 0.12);

  --shadow-xs: 0 1px 1px rgba(60, 20, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(60, 20, 20, 0.07), 0 1px 1px rgba(60, 20, 20, 0.03);
  --shadow-md: 0 8px 24px -6px rgba(90, 20, 28, 0.14), 0 2px 6px rgba(60, 20, 20, 0.05);
  --shadow-lg: 0 24px 56px -12px rgba(90, 20, 28, 0.24), 0 4px 12px rgba(60, 20, 20, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(60, 20, 20, 0.07);

  --nav-active-bg: var(--accent-tint);
  --nav-active-text: var(--text);

  --glass-blur: var(--blur-lg);
  --glass-sat: 150%;
  --glass-tint: rgba(255, 255, 255, 0.74);
  --glass-tint-strong: rgba(255, 255, 255, 0.9);
  --glass-tint-active: var(--accent-tint);
  --glass-border: rgba(90, 30, 30, 0.1);
  --glass-edge-highlight: rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 32px -8px rgba(90, 20, 28, 0.13), 0 1px 2px rgba(60, 20, 20, 0.05);
  --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 44px -10px rgba(90, 20, 28, 0.22), 0 2px 6px rgba(60, 20, 20, 0.07);

  --ambient-a: rgba(200, 16, 46, 0.13);
  --ambient-b: rgba(201, 158, 80, 0.12);
  --skeleton-base: #efe6e4;
  --skeleton-shine: #faf4f2;

  color-scheme: light;
}

/* ---- Dark - warm near-black, raised warm surfaces, glowing crimson */
:root[data-theme="black"],
:root[data-theme="default"] {
  --bg: #0f0b0b;
  --surface: #181212;
  --surface-2: #211918;
  --bg-panel: var(--surface);
  --bg-elevated: var(--surface-2);
  --bg-sunken: #0b0808;
  --bg-hover: #271e1d;
  --bg-active: #322726;
  --border: #2e2423;
  --border-strong: #46363a;

  --text: #ede6e4;
  --text-dim: #a89b98;
  --text-faint: #8f8280;
  --text-on-accent: #ffffff;

  --accent: #ff6b78;
  --accent-solid: #c8102e;
  --accent-solid-hover: #d91a38;
  --accent-deep: #8e0b21;
  --accent-tint: rgba(200, 16, 46, 0.16);
  --accent-tint-strong: rgba(200, 16, 46, 0.28);
  --accent-ring: rgba(255, 107, 120, 0.6);
  --accent-glow: rgba(200, 16, 46, 0.55);

  --champagne: #e9c98f;
  --champagne-tint: rgba(233, 201, 143, 0.12);

  --live: #ff5a36;
  --live-solid: #ff4d2e;
  --live-solid-hover: #ff6a45;
  --on-live: #1a0603;
  --live-tint: rgba(255, 90, 54, 0.16);
  --live-glow: rgba(255, 77, 46, 0.55);
  --danger: #ff8a94;
  --danger-solid: #b3122b;
  --danger-tint: rgba(255, 138, 148, 0.12);

  --success: #3ddc84;
  --success-tint: rgba(61, 220, 132, 0.14);
  --success-glow: rgba(61, 220, 132, 0.4);
  --warning: #f5b83d;
  --warning-tint: rgba(245, 184, 61, 0.14);
  --warning-glow: rgba(245, 184, 61, 0.4);
  --info: #e9c98f;
  --info-tint: rgba(233, 201, 143, 0.12);

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 0 rgba(255, 235, 230, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 1px 0 rgba(255, 235, 230, 0.04) inset, 0 10px 28px -6px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 1px 0 rgba(255, 235, 230, 0.05) inset, 0 28px 60px -12px rgba(0, 0, 0, 0.8);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.45);

  --nav-active-bg: var(--accent-tint);
  --nav-active-text: var(--text);

  --glass-blur: var(--blur-lg);
  --glass-sat: 160%;
  --glass-tint: rgba(255, 235, 230, 0.04);
  --glass-tint-strong: rgba(28, 20, 20, 0.88);
  --glass-tint-active: var(--accent-tint);
  --glass-border: rgba(255, 235, 230, 0.08);
  --glass-edge-highlight: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 1px 0 rgba(255, 235, 230, 0.05) inset, 0 12px 36px -10px rgba(0, 0, 0, 0.65);
  --glass-shadow-hover: 0 1px 0 rgba(255, 235, 230, 0.08) inset, 0 22px 50px -12px rgba(0, 0, 0, 0.8);

  --ambient-a: rgba(200, 16, 46, 0.2);
  --ambient-b: rgba(233, 201, 143, 0.07);
  --skeleton-base: #211918;
  --skeleton-shine: #2e2423;

  color-scheme: dark;
}