/**
 * Multi Video Manager — Design System
 * IMH Group, Inc. · Broadcast Ink
 *
 * Token source of truth for color, type, space, radius, elevation,
 * motion, and focus. Component styles live in styles.css and consume
 * these custom properties.
 *
 * Direction: deep ink graphite + steel cyan — enterprise media-ops,
 * not neon SaaS. Atmosphere via soft depth, cool undertones, and a
 * quiet technical grid — no purple washes, cream/terracotta, or glow theater.
 */

:root {
  color-scheme: dark;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-ui: "Sora", "Segoe UI", sans-serif;
  --font-display: "Syne", "Sora", sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ── Brand — steel cyan (broadcast / ops) ───────────────────── */
  --brand-primary: #0b7eb8;
  --brand-accent: #3db4e6;
  --brand-deep: #065a86;
  --brand-bright: #6ecceb;
  --brand-gradient: linear-gradient(135deg, #065a86 0%, #0b7eb8 42%, #3db4e6 100%);
  --brand-gradient-hover: linear-gradient(135deg, #076a9c 0%, #0d8cc9 45%, #52c0eb 100%);
  --brand-soft: rgba(61, 180, 230, 0.12);
  --brand-soft-strong: rgba(61, 180, 230, 0.2);

  /* ── Spacing scale (4px base) ───────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-2b: 0.75rem;  /* 12 */
  --space-3: 1rem;      /* 16 */
  --space-4: 1.5rem;    /* 24 */
  --space-5: 2rem;      /* 32 */
  --space-6: 3rem;      /* 48 */
  --space-7: 4rem;      /* 64 */
  --space-8: 6rem;      /* 96 */

  /* ── Surfaces — ink / graphite, cool undertone ──────────────── */
  --bg: #06090f;
  --bg-deep: #04070c;
  --bg-elevated: #0b1018;
  --surface-inset: #080c13;
  --surface-hover: rgba(255, 255, 255, 0.055);
  --surface-active: rgba(255, 255, 255, 0.08);
  --card: rgba(12, 17, 26, 0.78);
  --card-solid: #0f1520;
  --card2: #0f1520;
  --panel: #0f1520;
  --panel-elevated: #131a27;
  --overlay-scrim: rgba(2, 5, 10, 0.72);

  /* Atmosphere washes (subtle depth — not decorative glow) */
  --atmosphere-a: rgba(11, 126, 184, 0.15);
  --atmosphere-b: rgba(61, 180, 230, 0.06);
  --atmosphere-c: rgba(4, 40, 58, 0.42);
  --atmosphere-grid: rgba(168, 190, 214, 0.035);
  --atmosphere-grid-size: 48px;

  /* ── Borders ────────────────────────────────────────────────── */
  --border: rgba(168, 190, 214, 0.1);
  --border-strong: rgba(168, 190, 214, 0.18);
  --border-accent: rgba(61, 180, 230, 0.35);
  --border-subtle: rgba(168, 190, 214, 0.06);
  --divider: rgba(168, 190, 214, 0.08);

  /* ── Text — WCAG AA on --bg ─────────────────────────────────── */
  --text: #eef2f7;
  --text-secondary: #b7c3d4;
  --muted: #8b9bb0;
  --text-inverse: #061018;
  --accent: var(--brand-accent);
  --accent-dim: var(--brand-primary);
  --accent-soft: var(--brand-soft);
  --accent-text: #7ecceb;

  /* Semantic status */
  --danger: #f5a3a3;
  --danger-soft: rgba(245, 163, 163, 0.14);
  --success: #6ed9a0;
  --success-soft: rgba(110, 217, 160, 0.14);
  --warning: #f0c86a;
  --warning-soft: rgba(240, 200, 106, 0.14);
  --info: #7eb8e8;
  --info-soft: rgba(126, 184, 232, 0.14);

  /* ── Radius — tighter enterprise feel ───────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ── Elevation — depth without heavy glow ───────────────────── */
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 18px 56px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.55);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-glow: 0 0 0 1px rgba(61, 180, 230, 0.14), 0 8px 28px rgba(6, 90, 134, 0.22);
  --elevation-1: var(--shadow-sm);
  --elevation-2: var(--shadow-md);
  --elevation-3: var(--shadow-lg);
  --elevation-focus: var(--shadow-glow);

  /* ── Forms ──────────────────────────────────────────────────── */
  --form-gap: var(--space-3);
  --form-section-gap: var(--space-3);
  --field-gap: var(--space-1);
  --input-bg: rgba(0, 0, 0, 0.32);
  --input-bg-focus: rgba(0, 0, 0, 0.42);
  --input-border: var(--border-strong);
  --input-radius: 9px;
  --input-min-height: 2.75rem;
  --control-height-sm: 2.25rem;
  --control-height-md: 2.75rem;
  --control-height-lg: 3.25rem;

  /* ── Focus ──────────────────────────────────────────────────── */
  --focus-color: var(--brand-accent);
  --focus-shadow: 0 0 0 3px rgba(61, 180, 230, 0.28);
  --focus-ring: var(--focus-shadow);
  --focus-outline: 2px solid var(--focus-color);
  --focus-outline-offset: 2px;

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --duration-instant: 0.08s;
  --duration-fast: 0.16s;
  --duration-normal: 0.24s;
  --duration-slow: 0.4s;
  --duration-deliberate: 0.56s;

  /* ── Layout & chrome ────────────────────────────────────────── */
  --shell-max: 1120px;
  --shell-wide: 1280px;
  --chrome-blur: 22px;
  --chrome-height: 3.75rem;
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 400;
  --z-overlay: 800;
  --z-modal: 1000;
  --z-toast: 1200;
  --z-a11y: 10000;

  /* ── Glass / material ───────────────────────────────────────── */
  --glass-bg: rgba(12, 17, 26, 0.72);
  --glass-border: rgba(168, 190, 214, 0.12);
  --glass-blur: 18px;

  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Reduced motion: keep tokens, collapse durations for consumers */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms;
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-deliberate: 0.01ms;
  }
}