/* ════════════════════════════════════════════════════════════════════════════
   Aircut design tokens · self-hosted Inter · base typography
   ════════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter/InterVariable.woff2") format("woff2-variations"),
         url("/fonts/inter/InterVariable.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter/InterVariable-Italic.woff2") format("woff2-variations"),
         url("/fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

:root {
    /* ── Typography ─────────────────────────────────────────────────── */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, monospace;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;

    /* ── Spacing (8px grid) ─────────────────────────────────────────── */
    --space-2xs: 4px;
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;

    /* ── Radii ──────────────────────────────────────────────────────── */
    --radius-xs:   6px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-pill: 999px;

    /* ── Motion ─────────────────────────────────────────────────────── */
    --motion-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
    --motion-base: 160ms cubic-bezier(0.2, 0, 0, 1);
    --motion-slow: 280ms cubic-bezier(0.2, 0, 0, 1);

    /* ── Layout custom properties ───────────────────────────────────── */
    --header-h: 56px;
    --rail-w:   272px;

    /* ── Canvas — layered black ────────────────────────────────────── */
    --bg-canvas:    #0A0A0B;
    --bg-surface-1: #131316;
    --bg-surface-2: #1A1A1F;
    --bg-surface-3: #232328;

    /* ── Hairlines ──────────────────────────────────────────────────── */
    --border-hairline: rgba(255, 255, 255, 0.06);
    --border-default:  rgba(255, 255, 255, 0.08);
    --border-strong:   rgba(255, 255, 255, 0.14);
    --highlight-top:   inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* ── Text ──────────────────────────────────────────────────────── */
    --text-primary:   #FAFAFA;
    --text-secondary: #A1A1AA;
    --text-tertiary:  #71717A;
    --text-disabled:  #52525B;

    /* ── Brand accent — violet/indigo ──────────────────────────────── */
    --accent:        #7C7AED;
    --accent-hover:  #6D6BE8;
    --accent-press:  #5C5BD6;
    --accent-soft:   rgba(124, 122, 237, 0.14);
    --accent-glow:   rgba(124, 122, 237, 0.32);

    /* ── Tally — broadcast canonical ───────────────────────────────── */
    --tally-on-air:       #FF3B3B;
    --tally-on-air-rim:   rgba(255, 59, 59, 0.55);
    --tally-on-air-glow:  rgba(255, 59, 59, 0.25);
    --tally-preview:      #22C55E;
    --tally-preview-rim:  rgba(34, 197, 94, 0.45);
    --tally-cued:         #FACC15;

    /* ── Audio control palette — DISTINCT from tally ───────────────── */
    --audio-cue:       #22D3EE;
    --audio-cue-rim:   rgba(34, 211, 238, 0.55);
    --audio-cue-soft:  rgba(34, 211, 238, 0.12);
    --audio-muted:     #71717A;

    /* ── Signal status (engine dot, RTMP health) ───────────────────── */
    --signal-good: #10B981;
    --signal-warn: #F59E0B;
    --signal-bad:  #EF4444;
    --signal-idle: #52525B;

    /* ── Shadows — directional, not glowing ───────────────────────── */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-3: 0 24px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* ── Legacy aliases (kept so existing CSS keeps working) ───────
       These will be removed phase by phase as components migrate. */
    --bg-color:      var(--bg-canvas);
    --panel-bg:      var(--bg-surface-1);
    --bg-secondary:  var(--bg-surface-1);
    --bg-tertiary:   var(--bg-surface-2);
    --border-color:  var(--border-hairline);
    --border-subtle: var(--border-hairline);
    --text-main:     var(--text-primary);
    --text-muted:    var(--text-secondary);
    --text-dim:      var(--text-tertiary);
    --success:       var(--signal-good);
    --danger:        var(--signal-bad);
    --vk-blue:       var(--accent);
    --vk-blue-hover: var(--accent-hover);
    --vf-red:        #e3000f;
    --shadow-panel:  var(--shadow-2);
    --shadow-monitor: 0 0 0 1px var(--border-hairline), 0 10px 15px -3px rgba(0,0,0,0.8);
}

/* ── Box-sizing & font reset ─────────────────────────────────────── */
* {
    box-sizing: border-box;
    font-family: var(--font-sans);
}

html, body {
    font-family: var(--font-sans);
    font-feature-settings: "cv11", "ss01", "ss03";
    letter-spacing: -0.005em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    overflow-x: hidden;
    font-size: var(--text-base);
}

/* ── Caps-label utility ──────────────────────────────────────────── */
.label-caps {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ════════════════════════════════════════════════════════════════════
   The unified tally-light system.
   One class, three states. Covers monitors, source cards, GO LIVE.
   ════════════════════════════════════════════════════════════════════ */

.tally {
    box-shadow: inset 0 0 0 1px var(--border-hairline);
    transition: box-shadow var(--motion-base);
}

.tally.state-preview {
    box-shadow:
        inset 0 0 0 2px var(--tally-preview-rim),
        0 0 24px var(--tally-preview-rim);
}

.tally.state-on-air {
    box-shadow:
        inset 0 0 0 2px var(--tally-on-air-rim),
        0 0 36px var(--tally-on-air-glow);
    animation: tally-breathe 2.4s ease-in-out infinite;
}

.tally.state-just-cut {
    box-shadow:
        inset 0 0 0 3px var(--tally-cued),
        inset 0 0 0 6px var(--tally-on-air-rim);
    animation: none;
}

@keyframes tally-breathe {
    0%, 100% {
        box-shadow:
            inset 0 0 0 2px var(--tally-on-air-rim),
            0 0 28px var(--tally-on-air-glow);
    }
    50% {
        box-shadow:
            inset 0 0 0 2px var(--tally-on-air-rim),
            0 0 44px var(--tally-on-air-glow);
    }
}

/* ── Dark theme — kept as a no-op for backwards compatibility ────── */
/* The token system is dark by default at :root. The `.theme-dark`
   class continues to be applied by index.html but no longer needs
   to override anything — the tokens above are the dark theme. */
.theme-dark body {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
}