/* ============================================================================
   HotPunch — Colors & Type
   Dark-mode only. Engineered for broadcast operators reading at ~1 m
   in low ambient light. Numbers below are JUCE 0xAARRGGBB constants
   converted to web hex / rgb.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

:root {

  /* ── Type families ─────────────────────────────────────────────────────── */
  /* Production app uses the OS system font (.AppleSystemUIFont / Segoe UI).
     For web previews we substitute IBM Plex Sans — a technical, neutral sans
     in the same visual register as broadcast tooling (vMix, ATEM, Resolume).
     IBM Plex Mono powers timecode and any tabular-figure context.           */
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, "Cascadia Mono", monospace;

  /* ── Type scale (semantic — replaces 11.5 / 10.5 / 13.7 outliers) ──────── */
  /* Mirrors the proposed HotPunch::Theme::Font:: constants 1:1.             */
  --fs-display:  34px;   /* AboutWindow brand only                            */
  --fs-title:    20px;   /* Operator display "ON AIR / NEXT" callout         */
  --fs-h1:       18px;   /* Dialog title, panel header                       */
  --fs-h2:       14px;   /* Section header (bold), button label              */
  --fs-body:     13px;   /* Default body                                     */
  --fs-label:    12px;   /* Form labels, secondary text                      */
  --fs-caption:  11px;   /* Tooltips, status-bar text, mini-label timeline   */
  --fs-micro:    10px;   /* All-caps eyebrow, badge, "STATUS" rail           */

  /* Timecode — monospaced + tabular figures. Three sizes only.              */
  --fs-tc-sm:    14px;   /* Cue card duration, transport readout             */
  --fs-tc-md:    24px;   /* Top-bar master timecode                          */
  --fs-tc-xl:    72px;   /* Full-screen Operator Display timecode            */

  --lh-tight:    1.15;
  --lh-tight:    1.15;  /* @kind font */
  --lh-snug:     1.30;  /* @kind font */
  --lh-body:     1.45;  /* @kind font */

  /* Weights — bold = 700 for header punch; semibold (600) for emphasis;
     medium (500) for button labels; regular (400) for body.                 */
  --fw-regular:  400;   /* @kind font */
  --fw-medium:   500;   /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold:     700;   /* @kind font */


  /* ── Surface scale (dark, 6-tier) ──────────────────────────────────────── */
  /* Surface0 is NEW — fills the 17-hex "darker than Base" gap used by
     OutputDisplay / MultiCamViewer / ISO* monitor panels.                   */
  --c-surface-0:   #06080B;   /* monitor panels, full-screen output         */
  --c-base:        #0C0E12;   /* app background                              */
  --c-surface-1:   #14161C;   /* sidebar, tabs                               */
  --c-surface-2:   #1C1F26;   /* panel, popup menu, alert background         */
  --c-surface-3:   #252830;   /* default button, hover row                   */
  --c-surface-4:   #2E3138;   /* input, combo, pressed button                */

  /* Borders */
  --c-border-subtle:  #1E2028;
  --c-border-default: #2A2D36;
  --c-border-strong:  #3A3D47;

  /* Text */
  --c-fg-1:   #E8ECF0;   /* primary                                         */
  --c-fg-2:   #B0B6C0;   /* secondary — LIFTED from #8B919A for control-room  */
                          /* reading distance (per cuepaolo-relay/client.html).*/
  --c-fg-3:   #5C6370;   /* tertiary, disabled                              */
  --c-fg-inv: #0C0E12;   /* inverse — used on top of Primary buttons        */


  /* ── Broadcast semantic colors (LOCKED — non-negotiable) ───────────────── */
  /* These are anchored to broadcast conventions. Do NOT retint.             */
  --c-live:     #22C55E;   /* green — on-air confirmed signal                */
  --c-on-air:   #DC2626;   /* red — punch / output armed / take              */
  --c-preview:  #22C55E;   /* green — preview bus (renders as outline)       */
  --c-standby:  #F59E0B;   /* amber — armed, waiting                         */
  --c-break:    #EF4444;   /* red — break / stop / destructive               */
  --c-offline:  #6B7280;   /* gray — disconnected                            */
  --c-info:     #3B82F6;   /* blue — focus ring, link, dirty mark.            */
                            /* CONTEXT RULE: outline / focus / underline only —*/
                            /* this hex is ALSO M/E 1; disambiguation by      */
                            /* affordance type (outline vs filled chip).      */
  --c-note:     #D97706;   /* amber — operator note + warn-pulse.            */
                            /* Distinct hue from M/E 2 (orange) — no collision*/

  /* Mix-effects bus colors (locked, mirrored from web client.html) ======== */
  /* SINGLE M/E pair across all 3 surfaces (JUCE / web client / portal).    */
  /* The web has been internally consistent; JUCE is the one drifting.      */
  --c-me1:        #3B82F6;   /* M/E 1 blue = Info (context-separated)        */
                              /* Filled chip / left stripe / label only      */
  --c-me2:        #F97316;   /* M/E 2 orange-500 — brighter than JUCE's amber*/
                              /* Replaces both #B45309 chip + #D97706 status */


  /* ── Spacing scale ─────────────────────────────────────────────────────── */
  /* Recommendation: adopt 4/8 grid. Current codebase has parallel 5/10
     usage — this needs to converge. Keep XXS=2 for hairline separators.    */
  --sp-xxs:  2px;
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   12px;
  --sp-lg:   16px;
  --sp-xl:   24px;
  --sp-xxl:  32px;

  /* Radii — small. This is broadcast software, not a SaaS dashboard.       */
  --r-sm:    3px;
  --r-md:    4px;
  --r-lg:    6px;

  /* Sizes — matches HotPunch::Theme::Size:: */
  --sz-topbar:       36px;
  --sz-statusbar:    24px;
  --sz-iconrail:     40px;
  --sz-transport:    40px;
  --sz-btn-sm:       24px;
  --sz-btn-md:       32px;
  --sz-btn-lg:       40px;
  --sz-input:        32px;

  /* Elevation — there are basically two: inset (pressed) and 1px stroke.
     No drop-shadows in panel chrome; this UI is flat by design.            */
  --shadow-modal:    0 16px 40px rgba(0,0,0,.55), 0 0 0 1px var(--c-border-default);
  --shadow-popup:    0 8px 24px rgba(0,0,0,.45),  0 0 0 1px var(--c-border-default);
  --inset-pressed:   inset 0 1px 0 rgba(0,0,0,.30);

  /* Focus ring (used everywhere via :focus-visible) */
  --focus-ring: 0 0 0 2px var(--c-info);
}


/* ── Base elements ──────────────────────────────────────────────────────── */
html, body {
  background: var(--c-base);
  color: var(--c-fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv11", "ss03";  /* IBM Plex tabular numerics       */
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--fs-h1);  font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 0; }
h2 { font-size: var(--fs-h2);  font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 0; letter-spacing: 0.01em; }
h3 { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0; }

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg-2);
}

.tc, code, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}

.tc-sm { font: var(--fw-medium)   var(--fs-tc-sm)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.tc-md { font: var(--fw-semibold) var(--fs-tc-md)/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tc-xl { font: var(--fw-bold)     var(--fs-tc-xl)/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }

/* ── Button tier system (proposed centralisation) ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-sm);
  height: var(--sz-btn-md);
  padding: 0 var(--sp-md);
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  color: var(--c-fg-1);
  border: 1px solid var(--c-border-default);
  font: var(--fw-medium) var(--fs-h2)/1 var(--font-sans);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.btn:hover    { filter: brightness(1.08); }
.btn:active   { filter: brightness(0.92); box-shadow: var(--inset-pressed); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary   { background: var(--c-info);     color: #fff;       border-color: transparent; font-weight: var(--fw-bold); }
.btn--secondary { background: var(--c-surface-3); color: var(--c-fg-1); border-color: var(--c-border-default); }
.btn--tertiary  { background: var(--c-surface-2); color: var(--c-fg-1); border-color: var(--c-border-default); }
.btn--ghost     { background: transparent;       color: var(--c-fg-2); border-color: transparent; }
.btn--ghost:hover { color: var(--c-fg-1); background: var(--c-surface-3); }
.btn--danger    { background: var(--c-break);    color: #fff;       border-color: transparent; font-weight: var(--fw-bold); }
.btn--live      { background: var(--c-live);     color: #0a1f10;    border-color: transparent; font-weight: var(--fw-bold); }
.btn--onair     { background: var(--c-on-air);   color: #fff;       border-color: transparent; font-weight: var(--fw-bold); }

.btn--sm { height: var(--sz-btn-sm); padding: 0 var(--sp-sm); font-size: var(--fs-label); }
.btn--lg { height: var(--sz-btn-lg); padding: 0 var(--sp-lg); font-size: var(--fs-h1); }
.btn--icon { width: var(--sz-btn-md); padding: 0; }

/* Toggle "on" state — uses Live darkened (the LAF already does this) */
.btn.is-on { background: color-mix(in srgb, var(--c-live) 60%, black 40%); border-color: transparent; color: #fff; }

/* Generic surface, badge, divider helpers used across preview cards */
.surface { background: var(--c-surface-2); border: 1px solid var(--c-border-default); border-radius: var(--r-md); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 6px; border-radius: var(--r-sm);
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--c-surface-3); color: var(--c-fg-1);
}
.badge.is-live    { background: var(--c-live);    color: #0a1f10; }
.badge.is-onair   { background: var(--c-on-air);  color: #fff; }
.badge.is-preview { background: transparent; color: var(--c-preview); box-shadow: inset 0 0 0 1.5px var(--c-preview); }
.badge.is-standby { background: var(--c-standby); color: #2a1a00; }
.badge.is-break   { background: var(--c-break);   color: #fff; }
.badge.is-offline { background: var(--c-surface-3); color: var(--c-fg-2); }
.badge.is-me1     { background: var(--c-me1);     color: #fff; }
.badge.is-me2     { background: var(--c-me2);     color: #fff; }