/*
 * Streamroid design tokens + shared site chrome.
 *
 * Black and gold, with gold reserved for actions, the active item, live state
 * and rewards. Fonts are self-hosted (the CSP only allows 'self'); all three
 * are SIL OFL — see /static/fonts/LICENSE-*.txt.
 *
 * Load this before a page's own <style> so page rules can build on the tokens.
 */

@font-face { font-family: "Sora"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/static/fonts/sora-latin-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/sora-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/static/fonts/sora-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/sora-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 100 700;
  src: url(/static/fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 100 700;
  src: url(/static/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme: dark;
  /* Surfaces, darkest to lightest. All carry a slight warm bias. */
  --ink-0: #050505;
  --ink-1: #0d0c0a;
  --ink-2: #16130e;
  --ink-3: #221d14;
  /* Hairlines */
  --line: rgba(228,178,65,.14);
  --line-strong: rgba(228,178,65,.42);
  /* Gold ramp */
  --gold-7: #7f5b13;
  --gold-5: #e4b241;
  --gold-2: #f7dc94;
  --gold-wash: rgba(228,178,65,.10);
  --gold-wash-strong: rgba(228,178,65,.20);
  /* Text */
  --ivory: #fff3d6;
  --text: #e9dfc6;
  --muted: #a99a78;
  --on-gold: #140e03;
  /* Semantic */
  --live: #ff4d3d;
  --ok: #8fe28a;
  --ok-wash: rgba(110,210,100,.14);
  --danger: #ff9b85;
  --danger-wash: rgba(190,70,45,.16);
  /* Platform colours: only ever inside platform marks. */
  --kick: #53fc18;
  --twitch: #9146ff;
  --youtube: #ff0033;
  --tiktok: #25f4ee;
  /* Finishes */
  --metal: linear-gradient(100deg, #7f5b13 0%, #c8962e 22%, #e4b241 38%, #fff1c4 50%, #e4b241 62%, #b5841f 80%, #7f5b13 100%);
  --metal-btn: linear-gradient(180deg, #f7dc94 0%, #e4b241 42%, #b5841f 100%);
  --glow: 0 10px 30px -8px rgba(228,178,65,.55);
  /* Type */
  --f-display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Layout */
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
  --radius: 14px;
}

::selection { background: rgba(228,178,65,.35); color: var(--ivory); }
html { scrollbar-color: #3a3122 var(--ink-0); }

/* ---------- Shared site chrome (marketing + setup pages) ---------- */
.sr-wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.sr-eyebrow { font: 600 12px/1.2 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-5); }

.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--f-display); text-decoration: none; padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.sr-btn-gold { background: var(--metal-btn); color: var(--on-gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--glow); }
.sr-btn-gold:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 36px -8px rgba(228,178,65,.75); }
.sr-btn-ghost { color: var(--ivory); border-color: var(--line-strong); background: rgba(255,255,255,.02); }
.sr-btn-ghost:hover { border-color: var(--gold-5); background: var(--gold-wash); }
.sr-btn-sm { padding: 10px 16px; font-size: 14px; }
.sr-btn:focus-visible, .sr-header a:focus-visible, .sr-footer a:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.sr-header { position: sticky; top: 0; z-index: 50; background: rgba(5,5,5,.74); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.sr-header .sr-wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.sr-brand { display: block; line-height: 0; mix-blend-mode: screen; }
.sr-brand img { height: 38px; width: auto; }
.sr-nav { display: flex; gap: 4px; margin-left: auto; }
.sr-nav a { color: var(--text); text-decoration: none; font: 400 15px/1 var(--f-body); padding: 10px 12px; border-radius: 8px; }
.sr-nav a:hover { color: var(--ivory); background: rgba(255,255,255,.04); }
.sr-header-actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 860px) { .sr-nav { display: none; } .sr-header-actions { margin-left: auto; } }
@media (max-width: 420px) { .sr-header-actions .sr-btn-ghost { display: none; } .sr-brand img { height: 30px; } }

.sr-footer { border-top: 1px solid var(--line); margin-top: clamp(56px, 8vw, 96px); padding-block: 28px 40px; font: 400 14px/1.5 var(--f-body); color: var(--muted); }
.sr-footer .sr-wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.sr-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.sr-footer a { color: var(--text); text-decoration: none; }
.sr-footer a:hover { color: var(--ivory); }

/* Platform marks used by chat demos, setup tiles and dashboards. */
.sr-pf { width: 16px; height: 16px; border-radius: 4px; flex: none; display: inline-grid; place-items: center; }
.sr-pf svg { width: 11px; height: 11px; }
.sr-pf.kick { background: var(--kick); } .sr-pf.kick svg { fill: #000; }
.sr-pf.twitch { background: var(--twitch); } .sr-pf.twitch svg { fill: #fff; }
.sr-pf.youtube { background: var(--youtube); } .sr-pf.youtube svg { fill: #fff; }

.sr-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; animation: sr-pulse 1.8s ease-out infinite; }
@keyframes sr-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,61,.6); } 70% { box-shadow: 0 0 0 9px rgba(255,77,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,61,0); } }

.sr-metal-text { background: var(--metal); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sr-sheen 7s ease-in-out infinite; }
@keyframes sr-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .sr-pulse, .sr-metal-text { animation: none; }
  .sr-btn { transition: none; }
}