/* ============================================================
   FBM LIVE CONTROL — layout + adapter on top of the official
   FBM design system (css/fbm-theme.css).
   Load order in HTML:  fbm-theme.css  →  theme.css
   This file only (a) maps old alias token names to the real FBM
   tokens, and (b) adds shared page-layout classes in FBM style.
   Game-specific styling (prize wall, pocket) lives in each page.
   ============================================================ */

:root{
  /* ---- Map prototype aliases → real FBM tokens ---- */
  --brand-primary:   var(--fbm-red);      /* primary accent / buttons */
  --brand-secondary: var(--neon-blue);    /* timer ring, highlights */
  --brand-accent:    var(--gold);         /* winnings, grand prize */
  --brand-warn:      var(--gold);
  --brand-danger:    var(--bad);

  --bg-0: var(--bg);
  --bg-1: #0a1228;
  --bg-2: var(--panel2);
  --surface:   rgba(43,107,255,.08);
  --surface-2: rgba(43,107,255,.16);
  --stroke:    rgba(43,107,255,.35);

  --text-0: var(--white);
  --text-1: #bcd0ff;
  --text-2: var(--dim);

  /* ---- Typography (FBM fonts) ---- */
  --font-body:    var(--font-ui);          /* Chakra Petch — body/questions */

  --bg-image: none;
  --r-sm:12px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body{ font-family:var(--font-body); color:var(--text-0); }

/* FBM page background: red radial top-right + purple bottom-left + diagonal sheen */
.aurora{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  /* ~80% black + ~15% dark royal-blue gradient + ~5% red gradient + diagonal pattern */
  background:
    radial-gradient(560px 340px at 84% -4%, rgba(227,0,15,.12), transparent 55%),
    radial-gradient(1000px 720px at 6% 110%, rgba(42,79,208,.24), transparent 62%),
    radial-gradient(760px 560px at 100% 104%, rgba(42,79,208,.14), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 22px),
    var(--bg);
}
.aurora::after{ content:""; position:absolute; inset:-50%;
  background-image:var(--bg-image); background-size:cover; background-position:center; opacity:.25; }

/* Chips → FBM neon pill look */
.chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--r-pill);
  font-family:var(--font-num); font-weight:900; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(0,200,255,.1); border:1px solid var(--neon-blue); color:#9fe4ff; }

/* Glass card → FBM panel */
.glass{ background:linear-gradient(180deg,var(--panel),#0a1228);
  border:1px solid rgba(43,107,255,.35); border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(43,107,255,.12); }

/* Buttons — reuse FBM .btn base; add the aliases the markup uses */
.btn{ font-family:var(--font-ui); font-weight:700; font-size:15px; border:none; cursor:pointer; color:#fff;
  padding:15px 22px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg,#ff2733,var(--fbm-red)); box-shadow:0 5px 0 var(--red-dark);
  transition:transform .1s, box-shadow .1s; }
.btn:active{ transform:translateY(2px); box-shadow:0 3px 0 var(--red-dark); }
.btn.secondary{ background:linear-gradient(180deg,#2ad4ff,#0093c4); box-shadow:0 5px 0 var(--blue-dark); }
.btn.secondary:active{ box-shadow:0 3px 0 var(--blue-dark); }
.btn.success{ background:linear-gradient(180deg,#25f39b,var(--ok-dark)); box-shadow:0 5px 0 #052e1d; }
.btn.success:active{ box-shadow:0 3px 0 #052e1d; }
.btn.danger{ background:linear-gradient(180deg,#ff5566,var(--bad)); box-shadow:0 5px 0 var(--bad-dark); }
.btn.danger:active{ box-shadow:0 3px 0 var(--bad-dark); }
.btn.gold{ background:linear-gradient(180deg,#ffd24a,#c9920a); color:#3a2700; font-weight:800; box-shadow:0 5px 0 var(--gold-dark); }
.btn.gold:active{ box-shadow:0 3px 0 var(--gold-dark); }
.btn.ghost{ background:rgba(43,107,255,.08); border:1.5px solid rgba(43,107,255,.5); color:#bcd0ff; box-shadow:none; }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }


/* ============================================================
   LIGHT MODE — editorial white canvas + dark ink, one FBM-red accent
   (CastingTable design system, re-tokenised for NRK Media / FBM Live Control).
   Enabled by <html data-theme="light">. Dark stays the default.
   ============================================================ */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f2f2f0; --panel:#ffffff; --panel2:#f6f6f4;
  --bg-0:#f2f2f0; --bg-1:#e9e9e6; --bg-2:#ffffff;
  --surface:rgba(15,20,40,.045); --surface-2:rgba(15,20,40,.10); --stroke:rgba(15,20,40,.14);
  --text-0:#0a0a0a; --text-1:#3d3d3d; --text-2:#6f6f6f; --dim:#6f6f6f;
}
/* page canvas — soft editorial wash instead of the dark aurora */
:root[data-theme="light"] .aurora{
  background:
    radial-gradient(560px 340px at 84% -4%, rgba(227,0,15,.05), transparent 55%),
    radial-gradient(1000px 720px at 6% 110%, rgba(42,79,208,.045), transparent 62%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.018) 0 1px, transparent 1px 22px),
    var(--bg); }
:root[data-theme="light"] .aurora::after{ opacity:0; }
/* surfaces */
:root[data-theme="light"] .glass{ background:#ffffff !important; border:1px solid var(--stroke); box-shadow:0 1px 3px rgba(0,0,0,.05), 0 10px 34px rgba(0,0,0,.05); }
:root[data-theme="light"] .side{ background:linear-gradient(180deg,#ffffff,#fafafa); backdrop-filter:none; }
:root[data-theme="light"] .dcard{ background:#ffffff; }
:root[data-theme="light"] .dcard .thumb{ background:#0b1020; }       /* keep the mini-preview stage dark for contrast */
:root[data-theme="light"] .dcard .thumb .tcam{ background:#0b1020; }
/* form fields hard-code color:#fff — flip to ink on a white field */
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea,
:root[data-theme="light"] .st-f input, :root[data-theme="light"] .st-f select,
:root[data-theme="light"] .ble-row input, :root[data-theme="light"] .ble-row select{
  color:var(--text-0) !important; background:#ffffff; border-color:var(--stroke); }
:root[data-theme="light"] input[type=color]{ background:transparent; }
:root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder{ color:#9a9a9a; }
/* text that hard-codes #fff but sits on a LIGHT surface → ink */
:root[data-theme="light"] .nav a.active,
:root[data-theme="light"] .nav-toggle:hover,
:root[data-theme="light"] .lrow .lmain .lt,
:root[data-theme="light"] .lrow .lmain .lt.nm-rename,
:root[data-theme="light"] .showtoggle b,
:root[data-theme="light"] .lr-now b,
:root[data-theme="light"] .opbar .now b,
:root[data-theme="light"] .dcard .meta .nm,
:root[data-theme="light"] .dcard .meta .nm.nm-rename:hover,
:root[data-theme="light"] .rail-studio:hover,
:root[data-theme="light"] .settab:hover, :root[data-theme="light"] .ftab:hover, :root[data-theme="light"] .ftab.active,
:root[data-theme="light"] .surftab:hover, :root[data-theme="light"] .wsurftab:hover,
:root[data-theme="light"] .setup summary:hover,
:root[data-theme="light"] .cdrawer-close:hover,
:root[data-theme="light"] .lr-open:hover,
:root[data-theme="light"] .opnav-icon:hover,
:root[data-theme="light"] .st-ctx-i,
:root[data-theme="light"] .lrow .lmain .lt{ color:var(--text-0) !important; }
/* accent chips/active tabs keep white text on their coloured fill */
:root[data-theme="light"] .chip.on, :root[data-theme="light"] .opnav-icon.active,
:root[data-theme="light"] .masset .mdel{ color:#fff !important; }
/* dashed-separator lines in lists */
:root[data-theme="light"] .gfx-winboard .wb-item{ } /* (broadcast unaffected) */
/* theme toggle button */
.theme-toggle{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:8px;
  padding:9px 10px; border-radius:12px; border:1px solid var(--stroke); background:var(--surface);
  color:var(--text-1); font-family:var(--font-num); font-weight:900; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; cursor:pointer; transition:background var(--ease), color var(--ease); }
.theme-toggle:hover{ background:var(--surface-2); color:var(--text-0); }
.side.collapsed .theme-toggle .tt-lbl{ display:none; }