/* ==========================================================================
   SoMeLAB — design tokens
   Dark-first "stage" system. The environment tints itself to the selected
   platform via [data-pf]; the brand ember stays constant for chrome/CTAs.
   Admin's Design System editor writes only these inputs — everything else
   derives, so the interface can't be broken from the CMS.
   ========================================================================== */

:root{
  /* --- brand inputs (runtime-overridable from config) -------------------- */
  --vp:        #FF6B2C;                 /* ember — the brand colour. The token
                                           name is an identifier: every stylesheet
                                           and surface reads --vp, so it keeps its
                                           name through a rebrand. */
  --premium:   #FFC24B;                 /* premium tier gold */
  /* Same rule as the colours: the token if config set one, otherwise the
     value this build was designed with. */
  --font-d:    var(--vp-font-display, 'Space Grotesk', 'Inter', system-ui, sans-serif);
  --font-b:    var(--vp-font-body, 'Inter', system-ui, -apple-system, sans-serif);
  --font-m:    var(--vp-font-mono, 'JetBrains Mono', ui-monospace, 'SF Mono', monospace);

  /* --- stage neutrals ---------------------------------------------------- */
  --bg0:#0B0C10; --bg1:#12141A; --bg2:#181B23; --bg3:#212530;
  --line:#252A35; --line2:#333A49;
  --ink:#F2F4F8; --ink2:#C0C7D4; --mut:#828B9C; --faint:#59616F;

  /* --- semantic ----------------------------------------------------------- */
  --ok:#3DDC84;  --ok-soft:rgba(61,220,132,.13);
  --bad:#FF5464; --bad-soft:rgba(255,84,100,.13);
  --warn:#FFB224;--warn-soft:rgba(255,178,36,.13);
  --info:#4CC2FF;--info-soft:rgba(76,194,255,.13);

  /* --- platform identities ------------------------------------------------ */
  --twitch:#9146FF; --youtube:#FF4245; --kick:#53FC18;

  /* active platform accent (retinted by [data-pf]) */
  --pf:var(--vp);
  --pf-soft:  color-mix(in oklab, var(--pf) 16%, var(--bg1));
  --pf-softer:color-mix(in oklab, var(--pf) 8%,  var(--bg1));
  --pf-line:  color-mix(in oklab, var(--pf) 38%, var(--bg1));
  --pf-ink:   color-mix(in oklab, var(--pf) 72%, #fff);
  --pf-glow:  color-mix(in oklab, var(--pf) 55%, transparent);

  --vp-soft:  color-mix(in oklab, var(--vp) 15%, var(--bg1));
  --vp-line:  color-mix(in oklab, var(--vp) 40%, var(--bg1));
  --vp-ink:   color-mix(in oklab, var(--vp) 75%, #fff);
  --prem-soft:color-mix(in oklab, var(--premium) 14%, var(--bg1));
  --prem-line:color-mix(in oklab, var(--premium) 42%, var(--bg1));
  --prem-ink: color-mix(in oklab, var(--premium) 80%, #fff);

  /* --- geometry ----------------------------------------------------------- */
  --r-s:8px; --r:12px; --r-l:18px; --pill:999px;
  --cut:12px;             /* notch size for clipped corners */
  --gut:clamp(18px,4vw,44px);
  --maxw:1200px;
  --secy:clamp(56px,7vw,110px);

  /* --- type scale --------------------------------------------------------- */
  --t-xs:.72rem; --t-s:.8125rem; --t-b:.9375rem; --t-m:1.0625rem;
  --t-l:clamp(1.25rem,1.05rem + .7vw,1.6rem);
  --t-xl:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);
  --t-2xl:clamp(2.2rem,1.5rem + 3.2vw,3.9rem);

  /* --- elevation / glow --------------------------------------------------- */
  --sh1:0 1px 2px rgba(0,0,0,.5);
  --sh2:0 4px 14px rgba(0,0,0,.45), 0 16px 40px -18px rgba(0,0,0,.8);
  --sh3:0 10px 30px rgba(0,0,0,.5), 0 36px 80px -24px rgba(0,0,0,.9);
  --glow:0 0 0 1px var(--pf-line), 0 8px 34px -10px var(--pf-glow);
  --ring:0 0 0 2px var(--bg0), 0 0 0 4px var(--pf);

  /* --- motion ------------------------------------------------------------- */
  --ease:cubic-bezier(.25,.6,.3,1);
  --snap:cubic-bezier(.3,1.4,.45,1);
  --fast:.15s; --mid:.28s; --slow:.55s;
}

/* Platform environment tint */
:root[data-pf="twitch"]{  --pf:var(--twitch); }
:root[data-pf="youtube"]{ --pf:var(--youtube); }
:root[data-pf="kick"]{    --pf:var(--kick); --pf-ink:color-mix(in oklab, var(--kick) 60%, #fff); }

/* Design-system dials (written by admin) */
:root[data-radius="rounded"]{ --cut:0px; --r-s:10px; --r:16px; --r-l:22px; }
:root[data-radius="sharp"]{   --cut:0px; --r-s:3px;  --r:5px;  --r-l:8px; }
:root[data-density="compact"]{ --secy:clamp(40px,5vw,72px); --maxw:1120px; }
:root[data-bg="black"]{ --bg0:#050507; --bg1:#0C0D11; --bg2:#12141A; --bg3:#1A1D25; }

/* Motion intensity: [data-motion="off"] kills everything decorative */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after{
  animation-duration:.01ms !important; transition-duration:.01ms !important;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}