/* ==========================================================================
   DS v3 — @property Declarations para Animações CSS Nativas
   Issue: #209 · Parent: #188 (FASE-0)
   ==========================================================================

   `@property` registra custom properties com tipo, valor inicial e
   herança definidos. Sem isso, o browser trata custom properties como
   strings opacas — impossíveis de interpolar/animar via CSS.

   Com @property, é possível:
   - `transition: --ds-glass-opacity 0.3s ease` no hover
   - `@keyframes` que interpola blur-amount de 0 para 16px
   - `animation-timeline: scroll()` alterando glow-spread progressivamente

   TODOS os tokens têm `inherits: false`:
   - Cada elemento mantém seu próprio valor, isolado do pai
   - Essencial para elementos glass independentes na mesma árvore DOM

   Suporte: Chrome 85+, Edge 85+, Firefox 128+, Safari 16.4+
   Fallback: sem @property o token funciona como variável CSS normal
             (sem animação, mas sem quebra)

   Depende de: nenhuma dependência (registra os tipos, não usa outros tokens)
   Consumido por: glass.css (uso dos tokens), utilities/glass.css (transitions)
   ========================================================================== */

/* ── Obrigatórios — Issue #209 ───────────────────────────────────────────── */

/*
  --ds-glass-opacity
  Controla a opacidade do background translúcido das superfícies glass.
  Usado em: transições de hover/focus, condensação do header com scroll.
  Exemplo: `transition: --ds-glass-opacity 280ms var(--ds-ease-out-expo)`
*/
@property --ds-glass-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.84;
}

/*
  --ds-glass-blur-amount
  Controla o raio de desfoque do backdrop-filter nas superfícies glass.
  Usado em: headerCondense (scroll-driven), reduced-motion fallback.
  Exemplo: keyframes de `blur(0px)` a `blur(24px)` no frosted header.

  INTEGRAÇÃO: é uma <length> pura — use diretamente em blur():
    backdrop-filter: blur(var(--ds-glass-blur-amount)) saturate(160%);
  NÃO é compatível com os composite filters (--ds-glass-filter-surface),
  que são strings completas. Os dois sistemas são paralelos.
*/
@property --ds-glass-blur-amount {
  syntax: '<length>';
  inherits: false;
  initial-value: 16px;
}

/*
  --ds-glass-tint-l
  Componente de Lightness (L) do tint OKLCH do glass background.
  Permite animar a luminosidade do vidro sem recriar todo o oklch().
  Usado em: transições de estado (hover, active, focus) em cards glass.
  Exemplo: `@keyframes { from { --ds-glass-tint-l: 95 } to { 90 } }`
*/
@property --ds-glass-tint-l {
  syntax: '<number>';
  inherits: false;
  initial-value: 95;
}

/*
  --ds-glow-spread
  Controla o spread radius do glow (emissão de luz) em elementos accent.
  Usado em: hover de cards com variant accent, focus de botões primários.
  Exemplo: `transition: --ds-glow-spread 180ms var(--ds-ease-spring-1)`
            com `box-shadow: 0 0 var(--ds-glow-spread) var(--ds-primary)`
*/
@property --ds-glow-spread {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ── Adicionais — Necessários para GlassTilt e Scroll-Driven ─────────────── */

/*
  --ds-glass-hilight-x / --ds-glass-hilight-y
  Posição do reflexo especular cursor-driven (GlassTilt).
  Tipadas como <percentage> para interpolação suave no reset do mouseleave.
  Sem @property, o CSS não pode interpolar entre "50%" e um valor JS-definido.
*/
@property --ds-glass-hilight-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

@property --ds-glass-hilight-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/*
  --ds-glass-tint-c
  Componente de Chroma (C) do tint OKLCH — par do tint-l.
  Permite animar saturação do vidro independentemente de L.
  Usado em: accent hover states que saturar o vidro levemente.
*/
@property --ds-glass-tint-c {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.010;
}

/*
  --ds-scroll-condensation
  Progresso de condensação do header (0 = expandido, 1 = condensado).
  Permite usar o valor em cálculos: `calc(16px + var(--ds-scroll-condensation) * 8px)`
  Preenchido por scroll-driven animation ou JS fallback.
*/
@property --ds-scroll-condensation {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}