/* kiosk/app/css/skins.css — operator-switchable skins (issue #2).
   A skin is a token-block override keyed off body[data-skin]; theme.mjs applies the
   attribute (kv 'skin') and reads --hue-* / --accent back into JS, so one attribute
   retints CSS and JS together. No data-skin = classic (the base :root in app.css).
   Swap guide + brand values: docs/theming.md. */

/* Montserrat — Ninja Concepts brand primary (Brand Guidelines V2 p.14).
   Vendored woff2 (fontsource build, OFL); used by the 'brand' skin only. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/montserrat-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/vendor/fonts/montserrat-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/vendor/fonts/montserrat-latin-800-normal.woff2") format("woff2");
}

/* ── booth-poc ─────────────────────────────────────────────────────────────
   The CEO-approved POC look (docs/reference/ai4-kiosk-poc_10.html :root):
   near-black field, red accent, POC grain + product hues, cream doc card. */
body[data-skin="booth-poc"]{
  --bg:#0A0A0E; --bg-2:#050507; --panel:#131318; --panel-2:#1A1A21;
  --line:#26262B; --line-2:#33333A;
  --ink:#F4F4F2; --muted:#9A9AA3; --muted-2:#5C5C66;
  --accent:#E5484D; --accent-dim:#A8324A; --accent-ink:#FFFFFF;
  --glow1:rgba(229,72,77,.10); --glow2:rgba(77,163,229,.06);
  --sol-surface:#F7F5EF; --sol-surface-2:#EDEAE0; --sol-ink:#17171A;
  --sol-muted:#55555C; --sol-line:#E3E0D8;
  --hue-sigma:#4DA3E5; --hue-notes:#46C078; --hue-omni:#9B6DF0; --hue-sona:#F08A3C;
  --grain-you:#E5484D; --grain-role:#E5A93D; --grain-company:#4DA3E5; --grain-industry:#3EC1AC;
  --doc-surface:#F7F5EF; --doc-ink:#17171A; --doc-accent:#B8342F;
}

/* ── brand ─────────────────────────────────────────────────────────────────
   Ninja Concepts Brand Guidelines V2 (docs/theming.md for sourcing):
   Ninja Black #000000 · Pulse Purple #6C2EF2 · Deepwave Blue #0A6ABF ·
   Plasma Green #0FF2B2 · Digital Lilac #C86BF1 · Montserrat (Arial fallback).
   Product accents per the kit's product logos: Notes=Plasma Green,
   Omni=Digital Lilac, Sona=Plasma Green ("powered by Ninja Notes" family;
   flagged in docs/theming.md — needs a 4th color if Sona must read distinct),
   Sigma=Deepwave Blue (no kit logo; matches the existing kiosk blue). */
body[data-skin="brand"]{
  --bg:#000000; --bg-2:#07070C; --panel:#0E0E16; --panel-2:#15151F;
  --line:#232330; --line-2:#2E2E3E;
  --ink:#F2F2F7; --muted:#9A9AAB; --muted-2:#5F5F72;
  --accent:#6C2EF2; --accent-dim:#4A1FA8; --accent-ink:#FFFFFF;
  --blue:#0A6ABF;
  --glow1:rgba(87,84,217,.22); --glow2:rgba(32,192,146,.11);
  --sol-surface:#F5F4F7; --sol-surface-2:#EAE8EF; --sol-ink:#131018;
  --sol-muted:#5F5C6D; --sol-line:#D8D5E0;
  --hue-sigma:#60B4CC; --hue-notes:#0FF2B2; --hue-omni:#C86BF1; --hue-sona:#0FF2B2;
  --grain-you:#6C2EF2; --grain-role:#C86BF1; --grain-company:#0A6ABF; --grain-industry:#0FF2B2;
  --doc-surface:#FAFAF7; --doc-ink:#111114; --doc-accent:#6C2EF2;
  --font-display:"Montserrat","Bricolage Grotesque",Arial,sans-serif;
  --font-body:"Montserrat","Hanken Grotesk",Arial,sans-serif;
  /* --font-mono stays JetBrains Mono: the kit defines no mono face and the
     kickers/labels depend on one — flagged in docs/theming.md. */
}

/* Ambient field for the brand skin (template handoff): a slow-drifting light
   field sweeping #5754D9 -> #20C092, with #3C8FB6 as the midpoint orb and a
   faint #5754D9 mesh. The orbs read `--h`, which only the CLASSIC flow sets
   (screens.mjs writes the per-product hue onto documentElement); the booth
   flows never set it, so the field would render hueless without these. Scoped
   per-orb rather than overriding --h globally, which would retint the
   product-colored chrome the classic canvas depends on. Drift keyframes
   (22-32s) are unchanged. */
body[data-skin="brand"] #ambient .o1{--h:#5754D9;}
body[data-skin="brand"] #ambient .o2{--h:#20C092;}
body[data-skin="brand"] #ambient .o3{--h:#3C8FB6;}
body[data-skin="brand"] #ambient .mesh{--h:#5754D9;}