/* spatial-tokens.css — parte din creator-portal-spatial.css (liniile 1-109).
   Tokenii de sticlă (paletă glass), fundalul ambiental și bara demo.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ============================================================
   Creator Portal — SPATIAL UI (glassmorphism / visionOS) layer.
   Loads AFTER creator-portal.css and re-skins every surface as
   frosted glass floating over an ambient backdrop the user fills.
   Built as a token override (.cp-spatial) + per-surface blur, so
   it rides on top of the existing structural CSS without touching it.
   ============================================================ */

/* ---------- 1 · GLASS TOKENS ---------- */
/* Re-points the warm-paper token set to a cool dark-glass palette.
   Light text, translucent surfaces, hairline highlights. Wins over
   [data-theme] rules via body-prefixed specificity + load order.    */
body.cp-spatial,
body.cp-spatial[data-theme="dark"],
body.cp-spatial[data-theme="light"] {
  --paper:     oklch(0.20 0.02 265);          /* dark — text ON light fills */
  --paper-2:   oklch(1 0 0 / .07);            /* faint inner glass tint     */
  --surface:   oklch(1 0 0 / .10);            /* card glass fill            */
  --ink:       oklch(0.985 0.006 250);        /* primary text + light fills */
  --ink-2:     oklch(0.93 0.01 250 / .82);    /* secondary text             */
  --muted:     oklch(0.90 0.01 250 / .60);    /* labels                     */
  --faint:     oklch(0.90 0.01 250 / .42);    /* faintest                   */
  --line:      oklch(1 0 0 / .14);            /* hairline                   */
  --line-2:    oklch(1 0 0 / .24);            /* stronger border            */
  --signal:    oklch(0.84 0.14 162);          /* brighter green for dark    */
  --signal-bg: oklch(0.72 0.13 162 / .20);
  --pending:    oklch(0.86 0.11 80);
  --pending-bg: oklch(0.78 0.12 80 / .18);
  --danger:     oklch(0.78 0.13 25);
  --danger-bg:  oklch(0.70 0.14 25 / .18);

  /* reusable glass recipe knobs */
  --glass-tint:   oklch(0.22 0.018 265 / .42);
  --glass-tint-2: oklch(0.16 0.016 265 / .55);
  --glass-blur:   blur(30px) saturate(1.55);
  --glass-edge:   inset 0 1px 0 oklch(1 0 0 / .22), inset 0 0 0 1px oklch(1 0 0 / .06);
  --glass-shadow: 0 28px 60px -30px oklch(0 0 0 / .65), 0 4px 14px -8px oklch(0 0 0 / .5);
  --radius-lg: 24px;
  --radius-md: 16px;
  color-scheme: dark;
}

body.cp-spatial {
  background: transparent;
  color: var(--ink);
}

/* ---------- 2 · AMBIENT BACKDROP ---------- */
.cp-ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* default aurora — looks intentional before the user drops a photo */
  background:
    radial-gradient(120% 90% at 12% 8%,  oklch(0.55 0.16 300 / .85), transparent 55%),
    radial-gradient(120% 110% at 88% 18%, oklch(0.55 0.15 230 / .80), transparent 55%),
    radial-gradient(130% 120% at 70% 95%, oklch(0.52 0.13 190 / .75), transparent 55%),
    radial-gradient(120% 120% at 25% 90%, oklch(0.42 0.14 320 / .70), transparent 55%),
    linear-gradient(160deg, oklch(0.26 0.05 285), oklch(0.16 0.03 250));
}
.cp-ambient .cp-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* legibility scrim over whatever sits in the ambient */
.cp-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 0%, transparent 50%, oklch(0.10 0.02 265 / .22) 100%),
    linear-gradient(180deg, oklch(0.10 0.02 265 / .10), oklch(0.08 0.02 265 / .24));
}
/* ---------- 3 · DEMO BAR (top switcher) ---------- */
body.cp-spatial .demo-bar {
  background: oklch(0.14 0.018 265 / .55);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border-bottom: 1px solid oklch(1 0 0 / .12);
  box-shadow: 0 8px 30px -18px oklch(0 0 0 / .7);
}
body.cp-spatial .db-switch { background: oklch(1 0 0 / .08); }
body.cp-spatial .db-switch button.active {
  background: oklch(1 0 0 / .92);
  color: oklch(0.18 0.02 265);
  box-shadow: 0 2px 10px -4px oklch(0 0 0 / .5);
}
body.cp-spatial .db-brand .mark { background: oklch(1 0 0 / .95); color: oklch(0.18 0.02 265); }
.db-actions { display: flex; align-items: center; gap: 10px; }
.db-bg {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px; border-radius: 9px; cursor: pointer;
  background: oklch(1 0 0 / .1); border: 1px solid oklch(1 0 0 / .14);
  color: oklch(1 0 0 / .92); font-family: var(--ff-sans);
  font-size: 12.5px; font-weight: 600; transition: background .16s, border-color .16s;
}
.db-bg svg { width: 16px; height: 16px; }
.db-bg:hover { background: oklch(1 0 0 / .18); border-color: oklch(1 0 0 / .3); }
body.cp-spatial .db-theme { background: oklch(1 0 0 / .1); color: oklch(1 0 0 / .92); }
body.cp-spatial .db-theme:hover { background: oklch(1 0 0 / .18); }
@media (max-width: 640px) { .db-bg span { display: none; } .db-bg { padding: 0; width: 36px; justify-content: center; } }

/* ===========================================================================
   GRANIȚA: conținutul încorporat NU moștenește paleta de sticlă
   ---------------------------------------------------------------------------
   Shadow DOM izolează REGULILE, nu VARIABILELE. Custom properties se moștenesc
   prin bariera shadow, așa că orice widget montat în pagină vede tokenii de mai
   sus — inclusiv unul scris de altcineva, care habar n-are ce înseamnă ei aici.

   S-a întâmplat pe 2026-08-09: chatul citea `background: var(--surface, …)`, iar
   `--surface` e la noi `oklch(1 0 0 / .10)` — un alb de 10% care are sens DOAR
   sub un `backdrop-filter` pe care noi îl aplicăm în altă parte. Widget-ul n-are
   niciun blur, deci cardul de pre-chat a ieșit ~90% transparent, cu textul lui
   peste textul paginii. La fel `--ink`, care aici e o culoare DESCHISĂ (scriem
   pe fundal închis), a făcut butonul aproape alb în loc de închis.

   Nu e vina widget-ului că a folosit nume generice, și nu e vina tokenilor că au
   valorile astea — e granița care lipsea. Modulul a fost reparat separat
   (tbs-mod#206), dar asta îl repară pentru UN embed; regula de mai jos închide
   clasa pentru oricare altul.

   `initial` pe o custom property o face „invalidă garantat", deci un
   `var(--surface, literal)` dinăuntru cade pe PROPRIUL lui literal — exact ce ar
   fi făcut pe orice alt site. Nu impunem valorile noastre, ne dăm la o parte.

   NU redenumim tokenii în `--cp-glass-*`, deși ar fi fost celălalt drum: sunt
   685 de utilizări în 19 fișiere, iar componentele noastre chiar VOR valorile de
   sticlă sub acest skin. Problema n-a fost numele, a fost scurgerea.

   Iframe-urile nu au nevoie de asta — ele nu moștenesc CSS deloc. Contează doar
   embed-urile care montează shadow DOM în pagina noastră. Unul nou se
   protejează punându-și `data-embed-host` pe elementul-gazdă.
   =========================================================================== */
.o-livechat-root,
[data-embed-host] {
  --paper: initial;      --paper-2: initial;
  --surface: initial;
  --ink: initial;        --ink-2: initial;
  --muted: initial;      --faint: initial;
  --line: initial;       --line-2: initial;
  --signal: initial;     --signal-bg: initial;
  --pending: initial;    --pending-bg: initial;
  --danger: initial;     --danger-bg: initial;
  --glass-tint: initial; --glass-tint-2: initial;
  --glass-blur: initial; --glass-edge: initial; --glass-shadow: initial;
  --radius-lg: initial;  --radius-md: initial;
}