/* Design tokens, ported as-is from the design handoff (reference/tokens/
   colors, typography, spacing, elevation, motion, base; 2026-09-30).
   fonts.css is replaced by the Google Fonts <link> in index.html.
   Edit tokens here only; site.css reads them and hard-codes no hex. */
:root{
/* ── Base surfaces — the control room. Page backdrop, then five ascending rungs. ── */
--navy:#070B11;
--surface-0:#0F1E2E;
--surface-1:#152438;
--surface-2:#1D3048;
--surface-3:#263C55;

/* ── Ink ── */
--ink-bright:#F0F6FF;
--ink-dim:rgba(240,246,255,.56);  /* small-label rung. Alpha, not opaque, so it composites against
                                     whatever surface it lands on: 6.03:1 on --bg-page, 5.69 on
                                     --surface-0, 5.47 on --surface-1, 4.98 on --surface-2.
                                     Was #5A7A90, which was calibrated against the page only and
                                     measured 3.71:1 on panels and 2.95:1 on --surface-2. */
--ink-hover:#9FB0C4;   /* interactive affordance rung only: rest dim → hover this → selected bright */

/* ── Semantic accents. Cyan = broadcast. Magenta = AI. They never meet. ── */
--cyan:#00E5FF;
--cyan-soft:#7FD4FF;
--magenta:#C0008A;
--magenta-ink:#E24FB4;  /* magenta legible as type on dark surfaces */

/* ── Status ── */
--red:#FF3B30;      /* error and on-air */
--red-ink:#FFD5D2;
--green:#00E5A0;    /* ready */
--amber:#FF9500;    /* human-to-human signalling — never a system warning */
--amber-ink:#FFCB80;

/* ── The single permitted crossing of cyan and magenta ── */
--brand-gradient:linear-gradient(135deg,#00E5FF,#C0008A); /* @kind color */
/* Display headline wash: cyan → pale cyan → bright. Not a cyan/magenta crossing. */
--display-gradient:linear-gradient(96deg,#00E5FF 0%,#7FD4FF 42%,#F0F6FF 100%); /* @kind color */

/* ── Semantic aliases ── */
--bg-page:var(--navy);
--bg-raised:var(--surface-0);
--bg-active:var(--surface-1);
--bg-card:var(--navy);            /* cards sit on the page colour, defined by a 1px line */
--border-line:var(--surface-2);   /* dividers, card edges, table rules */
--border-strong:var(--surface-3);
--text-primary:var(--ink-bright);
--text-body:rgba(240,246,255,.62);
--text-muted:rgba(240,246,255,.50);
--text-label:var(--ink-dim);
--text-faint:var(--text-muted);       /* the floor: nothing lighter than this is legible as text.
                                        Was --surface-3 (#263C55) — 1.75:1 on --bg-page, which made
                                        every caption, node sublabel and timecode unreadable.
                                        For lines and fills use --surface-3 directly. */

--accent-broadcast:var(--cyan);
--accent-ai:var(--magenta);
--state-onair:var(--red);
--state-ready:var(--green);
--state-attention:var(--amber);

/* ── Accent washes used for fills, borders and hovers ── */
--cyan-fill:rgba(0,229,255,.12);
--cyan-fill-hover:rgba(0,229,255,.22);
--cyan-line:rgba(0,229,255,.5);
--cyan-tint:rgba(0,229,255,.05);
--magenta-fill:rgba(20,10,24,.82);
/* AI panels are the one region allowed a gradient: a subtle dark-to-dark that says the surface is live. Every other surface in the system is flat. */
--ai-panel:linear-gradient(120deg,rgba(20,10,24,.9),rgba(10,17,25,.9)); /* @kind color */
--magenta-line:rgba(192,0,138,.4);
--red-fill:rgba(255,59,48,.16);
--red-fill-hover:rgba(255,59,48,.3);
--red-line:rgba(255,59,48,.5);
--green-line:rgba(0,229,160,.35);
--amber-line:rgba(255,149,0,.5);
--amber-fill:rgba(255,149,0,.1);
--ghost-line:rgba(240,246,255,.2);
--ghost-line-hover:rgba(240,246,255,.42);
--ghost-fill:rgba(240,246,255,.04);

/* ── Guest (on-camera talent) palette. Secondary; never the marketing default. ── */
--guest-bg:#F5F2ED;
--guest-surface:#FDFBF8;
--guest-accent:#007A6E;
}
:root{
--font-display:Sora,Inter,system-ui,sans-serif;
--font-mono:'DM Mono',ui-monospace,SFMono-Regular,monospace;

/* weights — Sora runs light for display, semibold for the emphasised clause */
--weight-thin:200;
--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;

/* display / heading scale (site values) */
--size-h1:clamp(38px,6.4vw,88px);
--size-h2:clamp(26px,3.5vw,46px);
--size-h3:22px;
--size-h4:19px;
--size-stat:30px;
--size-stat-sm:26px;

/* body */
--size-lede:16.5px;
--size-body:15px;
--size-body-sm:13.5px;
--size-body-xs:12px;
--size-caption:11.5px;

/* mono scale — small, wide-tracked, uppercase */
--size-mono-lg:11px;
--size-mono:10px;
--size-mono-sm:9.5px;
--size-mono-xs:8.5px;
--size-mono-xxs:7.5px;
--size-mono-micro:7px;

/* tracking */
--track-display:-.035em;
--track-h2:-.028em;
--track-tight:-.01em;
--track-stat:-.03em;
--track-mono:.14em;
--track-eyebrow:.24em;
--track-kicker:.26em;
--track-mono-tight:.1em;

/* leading */
--leading-display:1.02;
--leading-h2:1.12;
--leading-lede:1.62;
--leading-body:1.68;
--leading-tight:1.4;

/* semantic aliases */
--text-eyebrow-size:var(--size-mono-sm);
--text-label-size:var(--size-mono-xs);
}
:root{
/* base rhythm — the site is spacious; do not densify it */
--space-1:3px;
--space-2:5px;
--space-3:7px;
--space-4:9px;
--space-5:11px;
--space-6:14px;
--space-7:18px;
--space-8:22px;
--space-9:26px;
--space-10:34px;
--space-11:44px;
--space-12:52px;
--space-14:70px;
--space-16:104px;

/* layout */
--page-gutter:26px;
--wrap-max:1180px;
--section-pad-y:104px;
--grid-gap:13px;
--grid-gap-wide:52px;
--measure-body:46ch;
--measure-lede:52ch;
--measure-display:16ch;

/* radii — from the source page. No pills on controls; only status chips are round. */
--radius-xs:3px;
--radius-sm:5px;
--radius:7px;
--radius-md:8px;
--radius-lg:9px;
--radius-xl:11px;
--radius-2xl:14px;
--radius-chip:12px;
--radius-pill:20px;  /* status pill / tag only */
--radius-round:50%;
}
:root{
/* Cards are defined by a 1px line, never a drop shadow.
   Shadow exists only for two things: seating real video in the page,
   and the glow that means a signal is hot. */
--line-hairline:1px solid var(--border-line);
--ring-cyan:0 0 0 1.5px rgba(0,229,255,.55);
--ring-red:0 0 0 1.5px rgba(255,59,48,.55),0 0 34px -12px rgba(255,59,48,.5);
--ring-select:0 0 0 2px var(--cyan);
--ring-live:0 0 0 2px var(--red);
--video-seat:0 0 0 1px var(--surface-2),0 26px 70px -26px rgba(0,0,0,.9);
--glow-cyan:0 0 30px -8px rgba(0,229,255,.6);
--glow-red:0 0 30px -8px rgba(255,59,48,.8);
--glow-tally:0 0 22px 2px rgba(255,59,48,.85);
--vignette:inset 0 0 200px 40px rgba(0,0,0,.62); /* @kind shadow */
--vignette-air:inset 0 0 280px 70px rgba(0,0,0,.78); /* @kind shadow */
--blur-chrome:blur(12px); /* @kind other */
--blur-pill:blur(8px); /* @kind other */
}
:root{
/* Motion is ambient and slow, or it is a hard cut. Never decorative,
   never a bounce, overshoot or elastic settle. */
--ease-drive:cubic-bezier(.4,0,.2,1); /* @kind other */
--dur-instant:.18s; /* @kind other */
--dur-fast:.2s; /* @kind other */
--dur-cut:.34s; /* @kind other */
--dur-fade:.3s; /* @kind other */
--dur-state:.5s; /* @kind other */
--dur-slow:1s; /* @kind other */
--dur-ambient:1.6s; /* @kind other */
--transition-control:all var(--dur-fast); /* @kind other */
--transition-state:all var(--dur-slow); /* @kind other */
--transition-ambient:box-shadow var(--dur-ambient) var(--ease-drive); /* @kind other */
}
html{scroll-behavior:smooth}
body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-display);-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none;transition:color var(--dur-fast)}
a:hover{color:var(--ink-hover)}
::selection{background:rgba(0,229,255,.25);color:var(--ink-bright)}