/* ==========================================================================
   KOSMETALL — DESIGN TOKENS
   Sistema de Design Universal · v2.0 · Julho 2026
   ==========================================================================
   Ficheiro único e definitivo — substitui a v1 ("ROOT 5.1 ULTIMATE EDITION").
   Fonte única de verdade para todas as páginas da KosmeTall: cores,
   tipografia responsiva, espaçamento, sombras, glass, blobs, motion,
   filtros de catálogo e componentes.

   Cores de marca (Rosa Peónia, Ouro Real, Azul Safira, Azul Meia-Noite) e
   tipografia principal (Montserrat / Poppins / Marko One) só mudam por
   decisão de marca — replicam exactamente as Definições Globais do
   Elementor (Cores Globais + Fontes Globais + Tipografia H1-H6). Tudo o
   resto é extensão de sistema: se precisares de um valor novo que não
   exista abaixo, ACRESCENTA-O aqui — nunca escrevas um valor solto
   directamente no CSS de uma página ou widget.

   COMPATIBILIDADE: todos os nomes de tokens da v1 foram mantidos sem
   alteração (nenhuma página já construída parte). A única substituição
   estrutural é o antigo bloco [data-theme="dark"] — ver secção I.3 para
   a razão. Os valores de sombra também foram internamente refactorizados
   para usar as novas variáveis -rgb (secção IV) em vez de rgba() soltos;
   o resultado visual é pixel-a-pixel idêntico ao da v1.

   ÂMBITO: este ficheiro declara apenas variáveis e os dois @property mais
   abaixo — não define estilos de elementos nem @keyframes. Isso fica no
   CSS de cada widget/secção (kosmetall-<pagina>.css), que consome estes
   tokens. Os comentários junto de cada bloco novo mostram o padrão de uso
   esperado nesse CSS local.

   ÍNDICE
   I.    Cor (primitivas · mapeamento semântico · secções em gradiente · gradientes)
   II.   Tipografia (stacks · escala responsiva fluida · compostos)
   III.  Espaçamento, Grid, Breakpoints, Touch & Safe-Area
   IV.   Forma e Profundidade (raio · sombras · glass · blobs)
   V.    Movimento (easing · duração · reveal · drift · stagger · shimmer)
   VI.   Ícones & Z-Index
   VII.  Efeitos Visuais & Aspect Ratio
   VIII. Componentes (botões · inputs · cards · badges · pills de filtro ·
         estatísticas · indicador de passos · nav mobile "like app")
   IX.   Utilitários & Acessibilidade
   ========================================================================== */

:root {

  /* ══════════════════════════════════════════════════════════════════
     I. COR
     ══════════════════════════════════════════════════════════════════ */

  /* ── 1. Primitivas de marca — PEONY (Principal / Feminilidade Moderna) ── */
  --peony-50:  #FDF2F8;
  --peony-100: #FAE3EF;
  --peony-200: #F3C6DE;
  --peony-300: #E699C1;
  --peony-400: #D473A5; /* [MAIN BRAND COLOR] — Rosa Peónia Doce */
  --peony-500: #BF5A8F;
  --peony-600: #A84C7D;
  --peony-700: #853861;
  --peony-800: #6B264A;
  --peony-900: #4A1731;
  --peony-400-rgb: 212, 115, 165; /* companion -rgb: permite rgba(var(--peony-400-rgb), X) em sombras/glass/blobs sem repetir o triplo em cada declaração */

  /* ── Primitivas de marca — SAPPHIRE (Complementar / Tecnologia / Confiança) ── */
  --sapphire-50:  #F0F5FF;
  --sapphire-100: #DAE6FC;
  --sapphire-200: #B8D0FA;
  --sapphire-300: #8FB5F7;
  --sapphire-400: #4D8AF0;
  --sapphire-500: #0F52BA; /* [SECONDARY BRAND COLOR] — Azul Safira */
  --sapphire-600: #0A3F96;
  --sapphire-700: #083680;
  --sapphire-800: #052354;
  --sapphire-900: #03183D;
  --sapphire-500-rgb: 15, 82, 186;

  /* ── Primitivas de marca — GOLD (Luxo / Acento / VIP / Original Garantido) ── */
  --gold-50:  #FEFDF5;
  --gold-100: #FCF5D9;
  --gold-200: #F5E6B3;
  --gold-300: #EBD488;
  --gold-400: #DEBF60;
  --gold-500: #D4AF37; /* [ACCENT BRAND COLOR] — Ouro Real */
  --gold-600: #AA8C2C;
  --gold-700: #806921;
  --gold-800: #554616;
  --gold-900: #2B230B;
  --gold-500-rgb: 212, 175, 55;

  /* ── Neutros — MIDNIGHT & CLOUD (Texto & Fundo) ── */
  --midnight-900: #0A0E14; /* [TEXT BASE] — Azul Meia-Noite Profundo */
  --midnight-800: #151920;
  --midnight-700: #2A2F3A;
  --midnight-600: #4A4F5C;
  --midnight-500: #6B7280; /* Text Muted */
  --midnight-400: #9CA3AF;
  --midnight-300: #D1D5DB;
  --midnight-200: #E5E7EB; /* Bordas */
  --midnight-100: #F3F4F6;
  --midnight-900-rgb: 10, 14, 20;
  --cloud-50:     #FDF8F9; /* [SECTION BG] — Nuvem de Rosas */
  --pure-white:   #FFFFFF; /* [MAIN BG] — Branco Puro (higiene e saúde) */
  --pure-white-rgb: 255, 255, 255;


  /* ── 2. Mapeamento semântico (o sistema lógico) ──────────────────────── */

  /* Cores de Acção */
  --color-primary:        var(--peony-400);
  --color-primary-hover:  var(--peony-500);
  --color-primary-active: var(--peony-600);
  --color-primary-rgb:    var(--peony-400-rgb);

  --color-secondary:       var(--sapphire-500);
  --color-secondary-hover: var(--sapphire-400);
  --color-secondary-rgb:   var(--sapphire-500-rgb);

  --color-accent:     var(--gold-500);
  --color-highlight:  var(--gold-300);
  --color-accent-rgb: var(--gold-500-rgb);

  /* Texto e Tipografia */
  --color-title:       var(--midnight-900);
  --color-txt:         var(--midnight-900);
  --color-muted:       #9AA0B4; /* Cool Gray (mantido do original para compatibilidade) */
  --color-placeholder: var(--midnight-300);
  --color-inverse:     var(--pure-white);

  /* Superfícies (Backgrounds) */
  --color-bg:           var(--pure-white);   /* Fundo Principal */
  --color-section:      var(--cloud-50);     /* Fundo Secundário */
  --color-card:         var(--pure-white);
  --color-surface-soft: var(--midnight-100);
  --color-glass-bg:     rgba(var(--pure-white-rgb), 0.75);

  /* Estados Funcionais (Feedback) */
  --color-success: #2ECC71;
  --color-danger:  #E74C3C; /* Vermelho — o erro não deve ser rosa */
  --color-warning: #F1C40F;
  --color-info:    var(--sapphire-400);

  /* Legado / Compatibilidade (v1 → v1, inalterado) */
  --color-royal:    var(--sapphire-500);
  --color-black:    #000000;
  --color-white:    #FFFFFF;
  --color-gray-100: var(--midnight-100);
  --color-gray-200: var(--midnight-200);
  --color-gray-300: var(--midnight-300);
  --color-gray-500: var(--color-muted);
  --color-gray-900: var(--midnight-900);


  /* ── 3. Secções em Gradiente (substitui o antigo dark mode) ──────────
     A KosmeTall não tem modo escuro global — o branco é identidade de
     marca ("higiene e saúde", ver Plano de Negócio). O que o Padrão
     Visual pede é a ALTERNÂNCIA de secções claras com secções em
     gradiente de marca (peony/sapphire/gold) dentro da MESMA página
     clara — por isso a v1 tinha a ferramenta errada (um dark mode que
     nenhuma página pede) para o problema certo.

     Uso: aplicar a classe utilitária .section--gradient (definida no
     fim deste ficheiro) a qualquer secção cujo background use um dos
     tokens --grad-* abaixo. Todo o conteúdo lá dentro pode continuar a
     usar os tokens semânticos normais (--color-txt, --color-title,
     --color-muted, --color-border, --color-accent) sem qualquer alteração
     no CSS do widget — a classe redefine-os localmente para as variantes
     "on-gradient" abaixo, tal como um Context Provider em React. */
  --color-txt-on-gradient:        rgba(var(--pure-white-rgb), 0.92);
  --color-title-on-gradient:      var(--pure-white);
  --color-muted-on-gradient:      rgba(var(--pure-white-rgb), 0.68);
  --color-border-on-gradient:     rgba(var(--pure-white-rgb), 0.22);
  --color-accent-on-gradient:     var(--gold-300); /* dourado mais claro — mantém contraste sobre peony/sapphire saturados */
  --color-bg-on-gradient-subtle:  rgba(var(--pure-white-rgb), 0.08);
  --color-bg-on-gradient-strong:  rgba(var(--pure-white-rgb), 0.16);
  --color-glass-bg-on-gradient:   rgba(var(--pure-white-rgb), 0.12);


  /* ── 4. Gradientes (atmosfera de luxo) ────────────────────────────── */

  /* Marca */
  --grad-corporate: linear-gradient(135deg, var(--peony-400), var(--sapphire-500));
  --grad-brand:      linear-gradient(135deg, var(--peony-500), var(--peony-400), var(--gold-300));

  /* Luxo e Metais */
  --grad-gold: linear-gradient(120deg, var(--gold-200), var(--gold-500));
  --grad-lux:  linear-gradient(135deg, #FCEABB 0%, #F8B500 50%, #FCEABB 100%);
  --grad-sunset: linear-gradient(120deg, var(--peony-400), var(--gold-400));

  /* Tech e Vidro */
  --grad-tech:        linear-gradient(120deg, var(--sapphire-500), #3ACEFA);
  --grad-glass-light: linear-gradient(180deg, rgba(var(--pure-white-rgb),0.9), rgba(var(--pure-white-rgb),0.5));
  --grad-glass-dark:  linear-gradient(180deg, rgba(var(--midnight-900-rgb),0.9), rgba(var(--midnight-900-rgb),0.7));

  /* Marketing */
  --grad-hot:         linear-gradient(45deg, #FF6B6B, var(--peony-500));
  --grad-sale:        linear-gradient(45deg, var(--gold-400), var(--peony-400));
  --grad-radial-glow: radial-gradient(circle, rgba(var(--peony-400-rgb),0.15), transparent 70%);

  /* NOVO — Anel de brilho rotativo em ouro. Usa --shimmer-angle (registado
     com @property na secção V) para o browser interpolar o ângulo em vez
     de "saltar". Reservar para momentos de confiança de topo: selo
     "100% Original", borda do cartão "Consultoria VIP", hover do CTA
     dourado. Nunca em elementos repetidos em grelha — o dourado só deve
     aparecer com moderação (ver Branding, uso do Ouro Real).
     Exemplo de uso num ::before do elemento a destacar:
       .selo-original::before {
         background: var(--grad-shimmer-gold);
         animation: km-shimmer-spin var(--duration-shimmer) linear infinite;
       }
       @keyframes km-shimmer-spin { to { --shimmer-angle: 360deg; } } */
  --grad-shimmer-gold: conic-gradient(from var(--shimmer-angle), transparent 0%, var(--gold-500) 8%, transparent 16%);


  /* ══════════════════════════════════════════════════════════════════
     II. TIPOGRAFIA
     ══════════════════════════════════════════════════════════════════ */

  --font-heading: 'Montserrat', sans-serif;
  --font-ui:      'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --font-accent:  'Marko One', cursive; /* destaque emocional / assinaturas — nunca em títulos longos, preços ou corpo */
  --font-mono:    'JetBrains Mono', monospace;

  /* Tamanhos legado (Modular Scale 1.25) — mantidos para badges, legendas
     pequenas e qualquer uso pontual que não corresponda a um papel
     tipográfico do Elementor abaixo. Para títulos/corpo/menus/botões usar
     SEMPRE a escala responsiva da secção seguinte, nunca esta. */
  --fs-2xs: 10px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  20px;
  --fs-xl:  25px;
  --fs-2xl: 31px;
  --fs-3xl: 39px;
  --fs-4xl: 48px;
  --fs-hero: 64px;

  /* Pesos */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ── Escala Tipográfica Responsiva — réplica exacta das Definições
     Globais do Elementor (Cores/Fontes Globais + Tipografia H1-H6).
     Fluida por clamp() entre 375px e 1440px de viewport: o valor Mobile
     do Elementor cai exactamente no limite inferior, o Desktop no limite
     superior, e o Tablet cai muito perto da curva a meio — sem "saltos"
     bruscos ao redimensionar, o toque "like app" pedido no Padrão Visual.
     Layout (colunas, empilhamento) continua a mudar em breakpoints fixos
     — ver secção III — só o TAMANHO DO TEXTO é contínuo. */
  --fs-h1:         clamp(34px, 27.66px + 1.69vw, 52px);
  --fs-h2:         clamp(28px, 23.07px + 1.31vw, 42px);
  --fs-h3:         clamp(24px, 21.18px + 0.75vw, 32px);
  --fs-h4:         clamp(22px, 20.59px + 0.38vw, 26px);
  --fs-h5:         clamp(18px, 16.59px + 0.38vw, 22px);
  --fs-h6:         clamp(16px, 15.30px + 0.19vw, 18px);
  --fs-nav:        var(--fs-h3); /* Global Font "Títulos e Menus" = 32/28/24, idêntico ao H3 */
  --fs-subtitle:   clamp(20px, 18.59px + 0.38vw, 24px); /* Global Font "Título Secundário" */
  --fs-body-fluid: clamp(15px, 14.65px + 0.09vw, 16px); /* Global Font "Texto (Corpo)" */
  --fs-accent:     clamp(24px, 22.59px + 0.38vw, 28px); /* Marko One "Accent" */
  --fs-link-btn:   clamp(14px, 13.65px + 0.09vw, 15px); /* "Links e Botões" */

  /* Line-height — no Elementor, Desktop = Tablet em todos os papéis; só o
     Mobile muda (ver overrides no fim desta secção). */
  --lh-h1: 1.1em;
  --lh-h2: 1.2em;
  --lh-h3: 1.2em;
  --lh-h4: 1.3em;
  --lh-h5: 1.3em;
  --lh-h6: 1.3em;
  --lh-nav: 1.2em;
  --lh-subtitle: 1.3em;
  --lh-body-fluid: 1.6em; /* constante em todos os breakpoints */
  --lh-accent: 1.4em;
  --lh-link-btn: 1em;

  /* Letter-spacing — H1-H5 e corpo são 0/0/0 no Elementor (irrelevante
     por breakpoint); Nav, Subtitle e H6 variam nos 3 níveis (overrides
     no fim desta secção). */
  --ls-h1: 0;
  --ls-h2: 0;
  --ls-h3: 0;
  --ls-h4: 0;
  --ls-h5: 0;
  --ls-nav: 1.5px;
  --ls-subtitle: 1px;
  --ls-h6: 1px;
  --ls-body-fluid: 0.5px;
  --ls-link-btn: 1px; /* fixo — sem variação por breakpoint no Elementor */

  /* Compostos — bundle peso/tamanho/altura-de-linha/família numa só
     declaração (`font: var(--type-h2);`). NOTA: o shorthand `font` do CSS
     não aceita letter-spacing — continuar a aplicar `letter-spacing: var(--ls-h2)`
     à parte quando o token não for 0. */
  --type-h1:       var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-heading);
  --type-h2:       var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-heading);
  --type-h3:       var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-heading);
  --type-h4:       var(--fw-medium) var(--fs-h4)/var(--lh-h4) var(--font-heading);
  --type-h5:       var(--fw-medium) var(--fs-h5)/var(--lh-h5) var(--font-heading);
  --type-h6:       var(--fw-semibold) var(--fs-h6)/var(--lh-h6) var(--font-heading);
  --type-nav:      var(--fw-bold) var(--fs-nav)/var(--lh-nav) var(--font-heading); /* + text-transform: uppercase à parte */
  --type-subtitle: var(--fw-semibold) var(--fs-subtitle)/var(--lh-subtitle) var(--font-heading);
  --type-body:     var(--fw-regular) var(--fs-body-fluid)/var(--lh-body-fluid) var(--font-body);
  --type-accent:   var(--fw-regular) var(--fs-accent)/var(--lh-accent) var(--font-accent);
  --type-link-btn: var(--fw-semibold) var(--fs-link-btn)/var(--lh-link-btn) var(--font-heading); /* + uppercase à parte */


  /* ══════════════════════════════════════════════════════════════════
     III. ESPAÇAMENTO, GRID, BREAKPOINTS, TOUCH & SAFE-AREA
     ══════════════════════════════════════════════════════════════════ */

  --sz-3xs: 2px;
  --sz-2xs: 4px;
  --sz-xs:  8px;
  --sz-sm:  12px;
  --sz-md:  16px;
  --sz-lg:  24px;
  --sz-xl:  32px;
  --sz-2xl: 48px;
  --sz-3xl: 64px;
  --sz-4xl: 96px;
  --sz-5xl: 144px;

  /* Breakpoints legado (v1) — mantidos para compatibilidade */
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 992px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;

  /* Breakpoints oficiais do Padrão Visual — usar estes LITERAIS em
     @media a partir de agora (CSS não permite var() dentro da condição
     de @media; os tokens abaixo servem de referência/documentação e
     podem ser lidos por JS com getComputedStyle para lógica matchMedia).
     Mobile: <768px · Tablet: 768–1024px · Desktop: >1024px · Wide: ≥1280px */
  --bp-tablet:  768px;
  --bp-desktop: 1025px;
  --bp-wide:    1280px;

  --touch-target-min: 44px;

  /* Safe-area (notch / home-indicator iOS) — essencial para o rodapé de
     navegação mobile "like app" via WPCode. env() com fallback 0px para
     browsers sem suporte. */
  --safe-area-top:    env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left:   env(safe-area-inset-left, 0px);
  --safe-area-right:  env(safe-area-inset-right, 0px);
  --mobile-nav-height: 64px;

  /* Grid System */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;

  --grid-gap-xs: 8px;
  --grid-gap-sm: 16px;
  --grid-gap-md: 24px;
  --grid-gap-lg: 32px;


  /* ══════════════════════════════════════════════════════════════════
     IV. FORMA E PROFUNDIDADE
     ══════════════════════════════════════════════════════════════════ */

  --border-hairline: 1px solid rgba(var(--midnight-900-rgb), 0.05);
  --border-default:  1px solid var(--midnight-200);
  --border-strong:   2px solid var(--midnight-900);
  --border-focus:    2px solid var(--sapphire-500);
  --border-lux:      1px solid var(--gold-500);
  --glass-border:    1px solid rgba(var(--pure-white-rgb), 0.4);

  /* Radius System */
  --rd-xs:  4px;
  --rd-sm:  6px;
  --rd-md:  8px;   /* padrão cards */
  --rd-lg:  15px;  /* botões principais */
  --rd-xl:  24px;
  --rd-2xl: 32px;
  --rd-3xl: 48px;
  --rd-pill: 999px;

  /* Sombras Neutras — refactorizadas para usar --midnight-900-rgb; valor
     final IDÊNTICO à v1, só a implementação ficou mais fácil de manter. */
  --shadow-xs: 0 2px 4px rgba(var(--midnight-900-rgb), 0.02);
  --shadow-sm: 0 4px 8px rgba(var(--midnight-900-rgb), 0.04);
  --shadow-md: 0 8px 16px rgba(var(--midnight-900-rgb), 0.08);
  --shadow-lg: 0 16px 32px rgba(var(--midnight-900-rgb), 0.12);
  --shadow-xl: 0 24px 48px rgba(var(--midnight-900-rgb), 0.18);

  /* Sombras Coloridas (Brand Glow) */
  --shadow-soft:      0 10px 40px rgba(var(--peony-400-rgb), 0.10);
  --shadow-neon-pink: 0 0 20px rgba(var(--peony-400-rgb), 0.5);
  --shadow-neon-blue: 0 0 20px rgba(var(--sapphire-500-rgb), 0.5);
  --shadow-neon-gold: 0 0 25px rgba(var(--gold-500-rgb), 0.4);

  /* Sombras Legado / Específicas */
  --shadow-lift:     0 18px 45px rgba(var(--sapphire-500-rgb), 0.15);
  --shadow-floating: 0 30px 90px rgba(var(--midnight-900-rgb), 0.20);
  --shadow-inner:    inset 0 2px 4px rgba(var(--midnight-900-rgb), 0.05); /* v1 usava preto puro; passa a usar midnight-900 para ficar consistente com a paleta em vez de um preto genérico */

  --shadow-blue-5-15-030:  0 5px 15px rgba(var(--sapphire-500-rgb), 0.3);
  --shadow-blue-10-25-030: 0 10px 25px rgba(var(--sapphire-500-rgb), 0.3);
  --shadow-gold-5-15-030:  0 5px 15px rgba(var(--gold-500-rgb), 0.3);

  /* ── NOVO — Glass, consolidado. A v1 tinha peças soltas (--color-glass-bg,
     --grad-glass-*, --glass-border) sem uma escala de blur nem uma
     variante para o "glass estratégico" que o Padrão Visual pede (ex.:
     cartão de CTA final). Adicionada aqui uma escala + uma variante
     dourada, ligada à "Consultoria VIP" / selo Original. */
  --glass-blur-sm: blur(8px);
  --glass-blur-md: blur(16px);
  --glass-blur-lg: blur(24px);
  --glass-bg-light:        rgba(var(--pure-white-rgb), 0.14);
  --glass-bg-light-strong: rgba(var(--pure-white-rgb), 0.22);
  --glass-bg-gold:         rgba(var(--gold-500-rgb), 0.10);
  --glass-border-gold:     1px solid rgba(var(--gold-500-rgb), 0.35);
  --glass-shadow:          var(--shadow-lg);

  /* ── NOVO — Blobs decorativos com deriva lenta (Padrão Visual, ponto 4).
     Só variáveis aqui — o keyframe de deriva vive no CSS do widget:
       .blob { position:absolute; border-radius:50%; filter:var(--blob-blur);
               animation: km-drift var(--duration-drift) var(--ease-in-out) infinite alternate; }
       @keyframes km-drift { to { transform: translate(3%, -4%) scale(1.06); } }
     Usar --z-blob (secção VI) para garantir que fica atrás do conteúdo. */
  --blob-size-sm: 220px;
  --blob-size-md: 380px;
  --blob-size-lg: 560px;
  --blob-size-xl: 760px;
  --blob-blur:    blur(60px);
  --blob-blur-lg: blur(100px);
  --opacity-blob:        0.14;
  --opacity-blob-strong: 0.22;
  --blob-color-peony:    rgba(var(--peony-400-rgb), var(--opacity-blob));
  --blob-color-gold:     rgba(var(--gold-500-rgb), var(--opacity-blob));
  --blob-color-sapphire: rgba(var(--sapphire-500-rgb), var(--opacity-blob));
  --blob-color-on-gradient: rgba(var(--pure-white-rgb), 0.10); /* blob claro para usar dentro de .section--gradient */


  /* ══════════════════════════════════════════════════════════════════
     V. MOVIMENTO
     ══════════════════════════════════════════════════════════════════ */

  --ease-linear: linear;
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* bouncy — hovers de destaque */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  --speed-micro: 0.1s;
  --speed-fast:  0.2s;
  --speed-norm:  0.3s;
  --speed-slow:  0.5s;
  --speed-long:  0.8s;

  /* NOVO — durações dedicadas ao Padrão Visual: reveal ao rolar, deriva
     dos blobs e o anel de brilho dourado. Separadas de --speed-* porque
     têm uma escala de tempo muito maior (segundos, não fracções de
     segundo) e um significado próprio. */
  --duration-reveal:  700ms;
  --duration-drift:   24s;   /* "deriva LENTA" — nunca acelerar isto */
  --duration-shimmer: 3.5s;
  --reveal-distance:  28px;  /* deslocamento vertical do estado .reveal antes de .visible */
  --reveal-fallback-delay: 1200ms; /* espelha o setTimeout de segurança do IntersectionObserver — ler via getComputedStyle no JS do 1º widget da página em vez de hardcode */

  /* NOVO — intervalo entre itens num reveal em cascata (grelhas de
     produtos, cards de features). Uso: em cada item,
       transition-delay: calc(var(--stagger-step) * var(--stagger-index, 0));
     onde --stagger-index é 0,1,2... por item (nth-child ou inline style).
     Acima de --stagger-step-max itens, usar min() no calc para não
     atrasar demasiado o fim da grelha. */
  --stagger-step: 70ms;
  --stagger-step-max: 8;

  /* Presets */
  --motion-hover:  transform var(--speed-fast) var(--ease-out);
  --motion-fade:   opacity var(--speed-norm) var(--ease-in-out);
  --motion-card:   transform var(--speed-norm) var(--ease-spring), box-shadow var(--speed-norm) ease;
  --motion-reveal: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
  --motion-drift:  transform var(--duration-drift) var(--ease-in-out) infinite alternate;


  /* ══════════════════════════════════════════════════════════════════
     VI. ÍCONES & Z-INDEX
     ══════════════════════════════════════════════════════════════════ */

  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  --icon-color: var(--peony-400);
  --icon-stroke-width: 1.75; /* Lucide: passar como default em lucide.createIcons({ 'stroke-width': 1.75 }) para um traço mais fino e editorial que o 2 por omissão */

  --z-negative: -1;
  --z-base:     1;
  --z-blob:     0;    /* NOVO — atrás do conteúdo, à frente do fundo da secção */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-modal:    1050;
  --z-popover:  1060;
  --z-tooltip:  1070;
  --z-toast:    1080;
  --z-header:   1200;
  --z-mobile-nav: 1150; /* NOVO — rodapé "like app": abaixo do header fixo, acima do conteúdo */
  --z-loader:   9999;


  /* ══════════════════════════════════════════════════════════════════
     VII. EFEITOS VISUAIS & ASPECT RATIO
     ══════════════════════════════════════════════════════════════════ */

  --fx-noise: url("/assets/noise-light.png"); /* confirmar que este asset existe no tema filho antes de usar — caso contrário remover a referência */
  --fx-blur-sm: blur(4px);
  --fx-blur-md: blur(10px);
  --fx-blur-lg: blur(20px);
  --fx-grain: repeating-linear-gradient(0deg, rgba(var(--pure-white-rgb),0.03), rgba(var(--pure-white-rgb),0.03) 1px, transparent 1px, transparent 2px);

  --overlay-bg:   rgba(var(--midnight-900-rgb), 0.65);
  --overlay-blur: var(--fx-blur-md);
  --scrim-bg:     rgba(var(--midnight-900-rgb), 0.6); /* NOVO — véu por trás de modais/drawers, mais suave que --overlay-bg */

  /* NOVO — usar com `aspect-ratio: var(--aspect-product)` em vez do hack
     de padding-top percentual. --aspect-product (4:5) é o rácio mais
     usado em fotografia de produto de beleza (Sephora/Fenty). */
  --aspect-square:   1 / 1;
  --aspect-video:    16 / 9;
  --aspect-portrait: 3 / 4;
  --aspect-product:  4 / 5;


  /* ══════════════════════════════════════════════════════════════════
     VIII. COMPONENTES
     ══════════════════════════════════════════════════════════════════ */

  /* Buttons — espelha exactamente a Configuração de Botões do Elementor */
  --btn-bg:       var(--peony-400);
  --btn-bg-hover: var(--sapphire-500);
  --btn-txt:      var(--pure-white);
  --btn-radius:   var(--rd-lg);
  --btn-shadow:   0 4px 14px rgba(var(--peony-400-rgb), 0.4);
  --btn-padding:  15px 30px;
  --btn-font:     var(--type-link-btn); /* Montserrat 600, uppercase à parte */

  /* Inputs — espelha os Campos de Formulário do Elementor */
  --input-bg:     var(--cloud-50);
  --input-border: var(--midnight-200);
  --input-radius: var(--rd-sm); /* 5px, conforme Elementor (--rd-sm=6px é o mais próximo do valor exacto no sistema legado) */
  --input-focus:  var(--gold-500);
  --input-height: 48px;
  --input-label-font: var(--fw-medium) 14px var(--font-body);

  /* Cards */
  --card-bg:     var(--pure-white);
  --card-radius: var(--rd-md);
  --card-shadow: var(--shadow-md);

  /* Badges */
  --badge-bg:     var(--peony-100);
  --badge-txt:    var(--peony-700);
  --badge-radius: var(--rd-pill);

  /* Alerts */
  --alert-bg-success:  #E6F9F0;
  --alert-bg-danger:   #FFF5F5;
  --alert-bg-warning:  #FFF9E5;
  --alert-txt-success: var(--color-success);
  --alert-txt-danger:  var(--color-danger);

  /* Header & Footer */
  --header-bg:  rgba(var(--pure-white-rgb), 0.95);
  --header-txt: var(--midnight-900);
  --footer-bg:  var(--midnight-900);
  --footer-txt: var(--pure-white);

  /* NOVO — Skeleton de carregamento. Útil em grelhas de produtos e
     resultados de filtro (AJAX/WooCommerce) para evitar "salto" de
     layout enquanto o conteúdo carrega. */
  --skeleton-bg:       var(--midnight-100);
  --skeleton-shine:    var(--pure-white);
  --skeleton-radius:   var(--rd-md);
  --skeleton-duration: 1.4s;

  /* NOVO — Pills de filtro. Mapeiam directamente para os Atributos da
     Estrutura de Taxonomias (Acabamento, Cobertura, Textura, FPS,
     Necessidade Capilar, etc.) e para as Etiquetas de produto. */
  --pill-bg:            var(--color-section);
  --pill-bg-active:     var(--color-primary);
  --pill-color:         var(--color-txt);
  --pill-color-active:  var(--pure-white);
  --pill-border:        var(--border-default);
  --pill-border-active: 1px solid var(--color-primary);
  --pill-radius:        var(--rd-pill);
  --pill-padding:       8px 18px;
  --pill-font:          var(--fw-medium) var(--fs-link-btn) var(--font-body);
  --pill-transition:    var(--motion-hover);

  /* NOVO — Números de destaque (secção de confiança: "X clientes",
     "100% Original", "entrega em -2h"). */
  --stat-number-size:  clamp(32px, 26.37px + 1.50vw, 48px);
  --stat-number-font:  var(--fw-bold) var(--stat-number-size) var(--font-heading);
  --stat-number-color: var(--color-primary);
  --stat-number-color-on-gradient: var(--pure-white);
  --stat-label-font:   var(--fw-medium) var(--fs-sm) var(--font-body);
  --stat-label-color:  var(--color-muted);

  /* NOVO — Indicador de passos: funil "Atendimento → Diagnóstico →
     Oferta Personal Shopper" (Plano de Negócio, secção 4.1) — ideal para
     a Homepage ou Sobre Nós. */
  --step-circle-size:         52px;
  --step-circle-bg:           var(--color-section);
  --step-circle-bg-active:    var(--grad-corporate);
  --step-circle-color:        var(--color-muted);
  --step-circle-color-active: var(--pure-white);
  --step-connector-height:       2px;
  --step-connector-color:        var(--midnight-200);
  --step-connector-color-active: var(--color-primary);

  /* NOVO — Rodapé de navegação mobile "like app" (via WPCode). */
  --appnav-height:      var(--mobile-nav-height);
  --appnav-bg:          rgba(var(--pure-white-rgb), 0.92);
  --appnav-blur:        var(--glass-blur-md);
  --appnav-border-top:  var(--border-hairline);
  --appnav-icon-size:   var(--icon-md);
  --appnav-icon-color:        var(--midnight-500);
  --appnav-icon-color-active: var(--color-primary);
  --appnav-label-font:  var(--fw-medium) 10px var(--font-body);
  --appnav-safe-bottom: var(--safe-area-bottom);
  --appnav-z:           var(--z-mobile-nav);


  /* ══════════════════════════════════════════════════════════════════
     IX. UTILITÁRIOS & ACESSIBILIDADE
     ══════════════════════════════════════════════════════════════════ */

  --focus-ring:    0 0 0 3px rgba(var(--gold-500-rgb), 0.5);
  --focus-outline: 2px solid var(--gold-500);
  /* NOVO — o anel dourado perde contraste sobre secções em gradiente
     escuro; usar este em vez de --focus-ring dentro de .section--gradient. */
  --focus-ring-on-gradient: 0 0 0 3px rgba(var(--pure-white-rgb), 0.6);

  --util-border-dashed:  1px dashed var(--midnight-300);
  --util-radius-circle:  50%;
  --util-bg-transparent: transparent;

  --state-hover-bg:  var(--peony-50);
  --state-active-bg: var(--peony-100);
  --state-disabled:  0.5;
}


/* ==========================================================================
   TIPOS ANIMÁVEIS (@property)
   ==========================================================================
   Regista o ângulo de --grad-shimmer-gold com um tipo concreto (<angle>),
   para o browser interpolar suavemente numa animation em vez de saltar
   entre valores — sem isto, animar uma custom property usada dentro de um
   gradiente simplesmente não interpola. Ver exemplo de uso na secção I.4.
   ========================================================================== */
@property --shimmer-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}


/* ==========================================================================
   SECÇÕES EM GRADIENTE — remapeamento contextual
   ==========================================================================
   Aplicar .section--gradient (ou .section--dark, alias) ao wrapper de
   qualquer secção cujo background use --grad-corporate / --grad-brand /
   --grad-tech / --grad-sunset. Os tokens SEMÂNTICOS (não as primitivas)
   passam a resolver para as variantes "on-gradient" só dentro deste
   âmbito — qualquer widget escrito com --color-txt / --color-title /
   --color-muted / --color-border / --color-accent normais fica
   automaticamente legível, sem precisar de duas versões do CSS.
   ========================================================================== */
.section--gradient,
.section--dark {
  --color-txt:      var(--color-txt-on-gradient);
  --color-title:    var(--color-title-on-gradient);
  --color-muted:    var(--color-muted-on-gradient);
  --color-border:   var(--color-border-on-gradient);
  --color-accent:   var(--color-accent-on-gradient);
  --color-glass-bg: var(--color-glass-bg-on-gradient);
  --focus-ring:     var(--focus-ring-on-gradient);
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --speed-micro: 0ms;
    --speed-fast: 0ms;
    --speed-norm: 0ms;
    --speed-slow: 0ms;
    --speed-long: 0ms;
    --duration-reveal: 0ms;
    --duration-drift: 0ms;
    --duration-shimmer: 0ms;
    --stagger-step: 0ms;
  }
}


/* ── Overrides responsivos — Tipografia ───────────────────────────────
   Só line-height e letter-spacing precisam de override por breakpoint
   (o tamanho já é 100% fluido acima). No Elementor, Desktop = Tablet em
   quase todos os papéis — por isso só 3 tokens (Nav, Subtitle, H6) têm
   um nível extra no Tablet; os restantes têm um único corte no Mobile. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --ls-nav: 1.2px;
    --ls-subtitle: 0.8px;
    --ls-h6: 0.8px;
  }
}

@media (max-width: 767px) {
  :root {
    --lh-h1: 1.2em;
    --lh-h2: 1.3em;
    --lh-h3: 1.3em;
    --lh-h4: 1.4em;
    --lh-h5: 1.4em;
    --lh-h6: 1.4em;
    --lh-nav: 1.3em;
    --lh-subtitle: 1.4em;
    --lh-accent: 1.5em;

    --ls-nav: 1px;
    --ls-subtitle: 0.5px;
    --ls-h6: 0.5px;
    --ls-body-fluid: 0.3px;
  }
}