/* ===================================================================
   public/shared/theme.css
   The one place where Buenas Benito colors and type are defined.
   Every page (control, host, guest, login, OBS sources, asset templates)
   links this file and uses the tokens below. JS-side copies of the same
   values (canvas, inline styles) live in public/shared/theme.js; keep the
   two in sync.

   Translucent brand colors: use the -rgb triplets, e.g.
     rgba(var(--bb-marigold-rgb), 0.3)
   (color-mix() is avoided on purpose: older OBS browser sources lack it.)
   =================================================================== */

/* Archivo, SIL Open Font License (see /fonts/archivo-ofl.txt).
   Variable font: weight 100-900, width 62%-125%. One file per subset. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin.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;
}

:root {
  /* ---------- Brand ---------- */
  --bb-olive: #424836;          /* from the logo outline and extrusion */
  --bb-olive-lite: #5A6249;
  --bb-marigold: #F2B33D;       /* accent */
  --bb-ink: #171A11;            /* dark ground */
  --bb-paper: #F6F4EC;
  --bb-white: #FFFFFF;

  --bb-olive-rgb: 66, 72, 54;
  --bb-olive-lite-rgb: 90, 98, 73;
  --bb-marigold-rgb: 242, 179, 61;
  --bb-ink-rgb: 23, 26, 17;
  --bb-paper-rgb: 246, 244, 236;
  --bb-white-rgb: 255, 255, 255;

  /* ---------- Semantic ---------- */
  --bb-onair: #FF3B30;          /* program / live / destructive */
  --bb-preview: #2FBF71;        /* preview / ready / ok */
  --bb-info: #6CB6FF;
  --bb-new: #B794FF;
  --bb-warn: #FF8A65;           /* warning / under 1 min / ad break */
  --bb-onair-rgb: 255, 59, 48;
  --bb-preview-rgb: 47, 191, 113;
  --bb-info-rgb: 108, 182, 255;
  --bb-new-rgb: 183, 148, 255;
  --bb-warn-rgb: 255, 138, 101;

  --bb-accent: var(--bb-marigold);
  --bb-on-accent: var(--bb-ink);
  --bb-brand: var(--bb-olive);
  --bb-on-brand: var(--bb-white);
  --bb-alert: var(--bb-onair);
  --bb-ok: var(--bb-preview);

  /* ---------- Control room UI (dark only, like a gallery) ---------- */
  --bb-bg: #0D0F0A;
  --bb-panel: #151811;
  --bb-panel-2: #1D2117;
  --bb-line: #2D3326;
  --bb-fg: #EEF0E6;
  --bb-muted: #9CA28E;
  --bb-bg-rgb: 13, 15, 10;
  --bb-panel-rgb: 21, 24, 17;
  --bb-fg-rgb: 238, 240, 230;

  /* ---------- Chat platforms ---------- */
  --bb-yt: #FF4E45;
  --bb-tw: #A970FF;
  --bb-tt: #25F4EE;
  --bb-ig: #F56AA8;
  --bb-x: #D9D9DE;

  /* ---------- Type ---------- */
  --bb-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bb-font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --bb-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --bb-stretch-display: 75%;    /* big on-air headlines, ticker label, score bug */
  --bb-stretch-heading: 85%;    /* sub headlines, questions */
  --bb-weight-regular: 400;
  --bb-weight-semibold: 600;
  --bb-weight-heavy: 800;
  --bb-weight-black: 900;

  color-scheme: dark;
}