/* @ionglue/ui-core — Salvo design tokens (formerly LGL-OS). Single source of truth for
   brand color, typography, spacing, elevation, motion.

   Canonical spec: https://branding.letsgolive.nl/salvo — the Salvo
   brand. This file is the programmatic realization of that spec; REMI
   and orchestrate-core both consume these tokens and are expected to
   have no local theme.css / ui-kit.css of their own.

   Brand v2 (MIG-112): neutrals are shared with Let's Go Live! (paper,
   grey, ink). The accent is Salvo cobalt (MIG-123); LGL orange stays on
   company material. Light values follow the
   ui-core alias block in the guide's :root.

   Surface ramp (bottom → top of the visual stack):
     --bg-deep       page void / body background
     --bg-panel      cards, sidebars
     --bg-raised     nested surfaces inside panels
     --bg-hover      hovered surfaces (slightly lighter than raised)
     --bg-elevated   dropdowns, modals, tooltips (highest in stack)

   Dark mode activates on html[data-mantine-color-scheme="dark"]: the one
   scheme attribute for every Salvo app, Mantine or not (MIG-121; see
   shell/colorScheme.js). html[data-theme="dark"] still works for
   orchestrate-core until it moves over; don't use it in new code.
*/

:root,
html[data-mantine-color-scheme="light"],
html[data-theme="light"] {
  /* Surface ramp — Salvo light surfaces: paper base, white panels,
     grey fills, as in the guide's ui-core aliases. */
  --bg-deep:     #F7F8FA;
  --bg-panel:    #FFFFFF;
  --bg-raised:   #F0F2F5;
  --bg-hover:    #E9ECF0;
  --bg-elevated: #E4E7EC;
  --input-bg:    #FFFFFF;

  --border:       #E4E7EC;
  --border-light: #D0D5DD;

  /* Text — Salvo light text ramp. --text-primary / --text-secondary are
     the canonical names; --text / --text-dim kept as shorter aliases for
     inline styles and the atem-ui panel set. */
  --text-primary:   #101828;
  --text-secondary: #344054;
  --text-muted:     #667085;
  --text:           var(--text-primary);
  --text-dim:       var(--text-secondary);

  /* Brand — Salvo cobalt (MIG-123), rationed: one primary action, links,
     active states. Never a status colour, and no status is blue.
       --accent          cobalt fill #2F5BEA — marks, active states, fills
       --accent-control  cobalt fill #2F5BEA — filled buttons
       --accent-contrast white #FFFFFF      — label on any cobalt fill (5.5:1)
       --accent-text     cobalt text #2348C4 — links, small copy on paper
     Ink on the fill is only ~3:1, so labels on it are always white.
     Prefer --accent-text for body-size text. */
  --accent:          #2F5BEA;
  --accent-control:  #2F5BEA;
  --accent-contrast: #FFFFFF;
  --accent-text:     #2348C4;
  --accent-hover:    #2348C4;
  --accent-dim:      rgba(47, 91, 234, 0.10);
  --accent-edge:     rgba(47, 91, 234, 0.35);

  /* Lockup (MIG-121) — the crosspoint mark's lit and unlit cells and the
     wordmark. The wordmark is never tinted: ink on light, near-white on dark. */
  --salvo-mark-lit:   var(--accent);
  --salvo-mark-unlit: #E4E7EC;
  --salvo-wordmark:   #101828;

  /* On-air indicators — Salvo status & signal. Distinct from
     --lgl-success/warning/danger below: these drive live/preview/error
     ring glyphs, those drive form validation and toast tone.
     Two tiers: on light grounds --status-* are the darker, text-safe
     stops (#11744A/#9A5B00/#B0221A); --lgl-* keep the signal fills
     (#1FA463/#E8A317/#E0362C). Dark mode uses the fills. */
  --status-live:        #11744A;
  --status-live-dim:    rgba(31, 164, 99, 0.10);
  --status-warning:     #9A5B00;
  --status-warning-dim: rgba(232, 163, 23, 0.10);
  --status-error:       #B0221A;
  --status-error-dim:   rgba(224, 54, 44, 0.08);

  /* Overlay surfaces — used by Menu / Modal / Popover shadows. */
  --overlay-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --modal-shadow:   0 20px 60px rgba(0, 0, 0, 0.15);

  /* Bezel — hardware-style switcher buttons.
     Top edge = highlight, bottom edge = shadow. */
  --bezel-hi:  rgba(255, 255, 255, 0.9);
  --bezel-lo:  rgba(0, 0, 0, 0.18);
  --bezel-rim: rgba(0, 0, 0, 0.28);

  /* Elevation ramp + focus ring. --lgl-shadow-focus pairs with
     --accent-dim for keyboard focus indicators. */
  --lgl-shadow-xs:    0 1px 2px rgba(16, 24, 40, 0.05);
  --lgl-shadow-sm:    0 2px 4px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --lgl-shadow-md:    0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --lgl-shadow-lg:    0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);
  --lgl-shadow-focus: 0 0 0 3px var(--accent-dim);

  /* Semantic status — for InlineAlert, toasts, form validation. Same
     Salvo signal hues as the on-air indicators, kept as separate tokens
     so the two can diverge again without a rename. Info sits outside the
     Salvo signal set and is a neutral slate: blue would read as the cobalt
     accent rather than as a state. */
  --lgl-success:    #1FA463;
  --lgl-success-bg: #1FA4631A;
  --lgl-warning:    #E8A317;
  --lgl-warning-bg: #E8A3171A;
  --lgl-danger:     #E0362C;
  --lgl-danger-bg:  #E0362C1A;
  --lgl-info:       #475467;
  --lgl-info-bg:    #4754671A;

  /* Legacy named aliases — orchestrate-core's dashboard.css consumed
     --green/--yellow/--red/--blue (+ -dim). Map them to the semantic
     palette so the old class rules keep rendering after dashboard.css
     drops its own :root. */
  --green:     var(--lgl-success);
  --green-dim: var(--lgl-success-bg);
  --yellow:    var(--lgl-warning);
  --yellow-dim:var(--lgl-warning-bg);
  --red:       var(--lgl-danger);
  --red-dim:   var(--lgl-danger-bg);
  --blue:      var(--lgl-info);
  --blue-dim:  var(--lgl-info-bg);

  color-scheme: light;
}

html[data-mantine-color-scheme="dark"],
html[data-theme="dark"] {
  /* Surface ramp — Salvo dark surfaces. Base → panel → raised →
     elevated; each step is lighter (no pure black). --bg-hover sits
     between raised and elevated. */
  --bg-deep:     #121212;
  --bg-panel:    #1A1A1A;
  --bg-raised:   #222222;
  --bg-hover:    #2A2A2A;
  --bg-elevated: #333333;
  --input-bg:    #121212;

  --border:       #2A2A2A;
  --border-light: #333333;

  /* Text — Salvo dark text ramp (no pure white). */
  --text-primary:   #EDEDED;
  --text-secondary: #CCCCCC;
  --text-muted:     #999999;
  --text:           var(--text-primary);
  --text-dim:       var(--text-secondary);

  /* Brand — cobalt steps up to #7B9BFF for links, the mark and active
     states on dark; the text stop collapses onto it. Filled controls keep
     the #2F5BEA fill with a white label. */
  --accent:          #7B9BFF;
  --accent-control:  #2F5BEA;
  --accent-contrast: #FFFFFF;
  --accent-text:     #7B9BFF;
  --accent-hover:    #9DB4FF;
  --accent-dim:      rgba(123, 155, 255, 0.13);
  --accent-edge:     rgba(123, 155, 255, 0.40);

  --salvo-mark-lit:   var(--accent);
  --salvo-mark-unlit: #2A2A2A;
  --salvo-wordmark:   #EDEDED;

  /* On-air indicators — the signal fills (BusButton fills with them, so
     they stay fills here rather than the lighter #FF6B5E text stop). */
  --status-live:        #1FA463;
  --status-live-dim:    rgba(31, 164, 99, 0.16);
  --status-warning:     #E8A317;
  --status-warning-dim: rgba(232, 163, 23, 0.16);
  --status-error:       #E0362C;
  --status-error-dim:   rgba(224, 54, 44, 0.18);

  --overlay-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --modal-shadow:   0 20px 60px rgba(0, 0, 0, 0.5);

  /* Bezel — dark variant. */
  --bezel-hi:  rgba(255, 255, 255, 0.08);
  --bezel-lo:  rgba(0, 0, 0, 0.55);
  --bezel-rim: rgba(0, 0, 0, 0.7);

  /* Elevation — deeper on dark. */
  --lgl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --lgl-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --lgl-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --lgl-shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);

  /* Semantic status — richer alpha on dark bg; info stays blue. */
  --lgl-success:    #1FA463;
  --lgl-success-bg: #1FA4632A;
  --lgl-warning:    #E8A317;
  --lgl-warning-bg: #E8A3172A;
  --lgl-danger:     #E0362C;
  --lgl-danger-bg:  #E0362C2A;
  --lgl-info:       #98A2B3;
  --lgl-info-bg:    #98A2B32A;

  color-scheme: dark;
}

/* Mantine links default to the primary fill, which is too light for text
   on paper. html[...] outranks Mantine's :root definition. */
html[data-mantine-color-scheme] {
  --mantine-color-anchor: var(--accent-text);
}

/* Theme-agnostic tokens — typography scale, spacing grid, radius scale,
   motion, font families, mobile layout. Values do not change between
   light and dark. */
:root {
  /* Font stacks — Salvo brand v2:
       display   — Schibsted Grotesk 700, page and section headings
       ui        — Schibsted Grotesk 400/500/600, all interface copy
       mono      — Martian Mono 400/500, readouts, buttons, short caps labels
     The wordmark is an SVG (Inter Tight 800); it is never set as text. */
  --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:      'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Martian Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  /* Type features. Schibsted's tabular figures also fix the width of
     commas and full stops, so running text stays proportional; use
     --font-features-num on numeric cells, counters and readouts. Mono
     opts into the slashed zero so 0/O never ambiguate in a readout. */
  --font-features-ui:   normal;
  --font-features-num:  'tnum' 1;
  --font-features-mono: 'tnum' 1, 'zero' 1;

  /* Display tracking — headings set slightly tight. */
  --tracking-display:  -0.02em;
  --tracking-wordmark: -0.01em;
  /* Caps labels — short mono caps on buttons and tags. Kept modest; wide
     tracked microtype is retired (nothing under 12px). */
  --tracking-caps:      0.06em;
  --tracking-caps-mono: 0.06em;

  /* Typography scale — rem-based so html font-size bumps scale all. */
  --lgl-font-xs:   0.75rem;
  --lgl-font-sm:   0.875rem;
  --lgl-font-md:   1rem;
  --lgl-font-base: 1rem;
  --lgl-font-lg:   1.125rem;
  --lgl-font-xl:   1.25rem;
  --lgl-font-2xl:  1.5rem;
  --lgl-font-3xl:  2rem;
  --lgl-font-4xl:  2.5rem;

  /* Spacing — 4px grid. */
  --lgl-space-1:  0.25rem;
  --lgl-space-2:  0.5rem;
  --lgl-space-3:  0.75rem;
  --lgl-space-4:  1rem;
  --lgl-space-5:  1.25rem;
  --lgl-space-6:  1.5rem;
  --lgl-space-8:  2rem;
  --lgl-space-10: 2.5rem;
  --lgl-space-12: 3rem;
  --lgl-space-16: 4rem;

  /* Radius — Salvo is square: --radius / --radius-sm are 0 for every
     surface and control. The --lgl-radius-* scale mirrors the aliases the
     brand guide defines but no Salvo component uses; keep it for rare
     non-UI cases (e.g. avatars), never for panels, buttons or inputs. */
  --radius:          0;
  --radius-sm:       0;
  --lgl-radius-xs:   2px;
  --lgl-radius-sm:   4px;
  --lgl-radius-md:   8px;
  --lgl-radius-lg:   12px;
  --lgl-radius-xl:   16px;
  --lgl-radius-pill: 999px;

  /* Motion — shared easing + 3-step duration ramp. */
  --lgl-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --lgl-duration-fast: 120ms;
  --lgl-duration-base: 180ms;
  --lgl-duration-slow: 260ms;

  /* Mobile bottom-nav — 0 on desktop, 72px + safe-area on ≤768px. */
  --lgl-bottom-nav-h: 0px;
}

@media (max-width: 768px) {
  :root {
    --lgl-bottom-nav-h: calc(72px + env(safe-area-inset-bottom));
  }
}

/* Pulse animation — used by DotIndicator status="live" and other
   attention-seeking UI. */
@keyframes lgl-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Base reset + default body typography. */
html, body, #root { height: 100%; }

/* Global type-scale bump: +15% on root font-size so every rem-based
   size (Mantine, FA, --lgl-font-*) grows proportionally. A further
   +2% under 480px makes phone-distance reading comfortable without
   per-component touch branching. Done here so REMI, orchestrate-core
   and any future consumer inherit the same scale the moment they
   import @ionglue/ui-core — no local theme.css overrides needed. */
html { font-size: 115%; }
@media (max-width: 480px) { html { font-size: 117%; } }

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-feature-settings: var(--font-features-ui);
  -webkit-font-smoothing: antialiased;
}

/* Mono cut carries its own feature set (tabular + slashed zero). The
   primitives that render mono (Timecode, Stat, Pill, Row, BusButton,
   Slider) set this inline; these element selectors cover raw markup. */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-features-mono);
}