/* =============================================================
   LIQUID GLASS — TOKENS
   Spec: docs/superpowers/specs/2026-08-02-liquid-glass-design-system.md §4
   Layer: tokens

   Attivazione: solo sotto [data-ds="lg"] (impostato da index.html via ?ds=lg).
   Senza il gate, nulla di questo file ha effetto: il rollback e' il default.
   ============================================================= */

@layer reset, tokens, material, components, surfaces, overrides;

@layer tokens {
  :root[data-ds="lg"] {
    /* ── Le quattro taglie di vetro (§4) ──
       Sostituiscono i 9 valori di blur hardcoded oggi sparsi nei CSS. */
    --lg-1: 4px;    /* badge, chip, pill            */
    --lg-2: 12px;   /* card, tile                   */
    --lg-3: 20px;   /* navbar, pannelli fluttuanti  */
    --lg-4: 40px;   /* modali, sheet                */

    /* Saturazione: e' cio' che distingue il vetro dal semplice sfocato.
       Sotto 150% il materiale legge come "opaco", sopra 200% vira. */
    --lg-sat: 180%;

    /* ── Riempimento e bordo ──
       Il vetro non e' trasparenza pura: serve un velo che dia corpo
       al testo sovrastante, altrimenti il contrasto crolla sul mosso. */
    --lg-fill: rgba(255, 255, 255, 0.055);
    --lg-fill-strong: rgba(255, 255, 255, 0.09);
    --lg-edge: rgba(255, 255, 255, 0.14);
    --lg-edge-strong: rgba(255, 255, 255, 0.24);

    /* ── Specular: il riflesso interno ──
       Alto sul bordo superiore, appena accennato su quello inferiore:
       simula una luce zenitale, che e' come il vetro si legge in natura. */
    --lg-spec-top: rgba(255, 255, 255, 0.45);
    --lg-spec-bottom: rgba(255, 255, 255, 0.08);

    /* ── Ombra portata ── */
    --lg-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.38);
    --lg-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.45);
    --lg-shadow-4: 0 24px 64px rgba(0, 0, 0, 0.55);

    /* ── Superficie solida (layer surfaces, v4.4.0) ──
       Variante opaca del vetro per le card di contenuto: stessa famiglia
       cromatica del fallback rgba(12,16,30) su --lp-bg #06090D.
       Coerente con --lp-bg-elevated (#0a0e1a) di liquid-design-system. */
    --lg-surface: #0e1524;
    --lg-surface-edge: rgba(255, 255, 255, 0.08);

    /* ── Raggi concentrici (§4) ──
       Non una scala arbitraria ma una relazione: il raggio di un elemento
       annidato e' quello del contenitore MENO il proprio padding.
       Si usa cosi':  border-radius: calc(var(--lg-r-card) - var(--lg-pad-card));
       E' il dettaglio che fa leggere un'interfaccia come coerente. */
    --lg-r-pill: 999px;
    --lg-r-chip: 10px;
    --lg-r-card: 20px;
    --lg-r-panel: 26px;
    --lg-r-modal: 32px;
    --lg-pad-chip: 8px;
    --lg-pad-card: 16px;
    --lg-pad-panel: 24px;

    /* ── Motion ── */
    --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lg-fast: 160ms;
    --lg-base: 280ms;
  }
}