/* Hallmark · macrostructure: Workbench (dashboard hub variant) · tone: technical-utilitarian · anchor hue: 258 (production blue) */
/* genre: modern-minimal · theme: Daylight · nav: N9 Edge-aligned · footer: Ft2 Inline single line */
/* Video tiles keep a dark "well" surface deliberately — this is the standard VMS/media-player
   convention (dark video surface inside light chrome) for contrast and perceived video quality,
   independent of the app's own light/dark theme. See --color-well-* below. */

/* ─── Font Imports ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ─── Colour Tokens ─────────────────────────────────────────────────────────── */
/* eXray Vision palette — values and sources in design.md §1. Existing names are
   kept so style.css follows without edits: accent = primary, paper = page,
   paper-2 = card, rule = border. */
:root {
  /* Paper (surfaces) */
  --color-paper:    #F5F7FA;   /* app background */
  --color-paper-2:  #FFFFFF;   /* card / panel surface */
  --color-paper-3:  #EEF2F7;   /* elevated / hover surface */
  --color-paper-4:  #E6EBF2;   /* active / pressed surface */

  /* Rule / border */
  --color-rule:     #E3E8EF;

  /* Ink (text) */
  --color-ink:      #0F1B2D;   /* primary text */
  --color-muted:    #5B6576;   /* secondary text */
  --color-dim:      #9AA3B2;   /* disabled / tertiary */

  /* Accent — primary blue */
  --color-accent:   #2B62CC;
  --color-accent-2: #1F4FA8;   /* hover */
  --color-accent-glow: rgb(43 98 204 / 0.10);
  --color-accent-tint: #E9F0FC;  /* KPI icon tile, info callout */
  --color-accent-soft: #BDCEEC;  /* elapsed scrubber track */
  --color-track:       #DDDFE5;  /* unfilled track */
  --color-avatar:      #4A81D3;

  /* Navy shell (top bar + side nav) */
  --color-topbar:           #07132A;
  --color-sidebar:          #061937;
  --color-sidebar-ink:      #C9D3E3;
  --color-sidebar-ink-active: #FFFFFF;
  --color-topbar-field:     #0F1F3D;
  --color-topbar-field-rule: #2A3A57;

  /* Severity — solid for text/dots/series, tint for badge backgrounds */
  --color-critical:      #C13F34;
  --color-critical-tint: #F6E4E0;
  --color-critical-banner: #B03D37;
  --color-major:         #D89036;
  --color-major-tint:    #FAF0DE;
  --color-minor:         #4A9A5A;
  --color-minor-tint:    #E0F2E6;
  --color-info:          #7C5CE0;
  --color-info-tint:     #EFEBFD;

  /* Status colours — same hues as the severity set */
  --color-live:     #4A9A5A;   /* green — connected/live */
  --color-connect:  #D89036;   /* amber — connecting */
  --color-error:    #C13F34;   /* red — error */
  --color-stopped:  #9AA3B2;   /* muted — stopped */

  /* Focus ring */
  --color-focus:    #2B62CC;

  /* Overlay (modal/dark scrims — stays dark regardless of app theme) */
  --color-overlay:  rgb(7 19 42 / 0.55);

  /* Video well — camera tiles stay dark, deliberately, on top of the light theme */
  --color-well:       oklch(11% 0.015 250);   /* tile surface / video background */
  --color-well-2:      oklch(16% 0.015 250);   /* placeholder / channel-number bg */
  --color-well-3:      oklch(21% 0.015 250);   /* hover state within a well-toned surface */
  --color-well-rule:   oklch(24% 0.015 250);   /* tile border (resting/live) */
  --color-well-ink:    oklch(93% 0.010 250);   /* label/header text over video */
  --color-well-muted:  oklch(70% 0.012 250);   /* secondary text over video */
  --color-well-dim:    oklch(45% 0.012 250);   /* channel-number placeholder */

  /* Bloom — retired for the clean daylight theme (was a dark-canvas atmospheric accent) */
  --bloom-a: none;
  --bloom-b: none;
}

/* ─── Font Tokens ────────────────────────────────────────────────────────────── */
:root {
  --font-display:  'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:     'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:     'Geist Mono', ui-monospace, monospace;
}

/* ─── Type Scale (major third — 1.25) ───────────────────────────────────────── */
:root {
  --text-xs:      0.64rem;
  --text-sm:      0.8rem;
  --text-base:    1rem;
  --text-md:      1.25rem;
  --text-lg:      1.5625rem;
  --text-xl:      1.9531rem;
  --text-2xl:     2.4414rem;
  --text-display: clamp(2rem, 3vw + 1rem, 3.2rem);
}

/* ─── Spacing (4pt scale) ────────────────────────────────────────────────────── */
:root {
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
}

/* ─── Radius ─────────────────────────────────────────────────────────────────── */
:root {
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;
}

/* ─── Motion ─────────────────────────────────────────────────────────────────── */
:root {
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     350ms;
}