/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — V. Color Lenses
   Fonte da verdade: docs/DESIGN.md e docs/MOTION.md deste repo.
   Nenhum hex e nenhum ms solto fora daqui. Herdado da arquitetura de FG Store
   e do porte CSS-puro de Cat's Eye.

   ⚠️ CSS PURO DE PROPÓSITO. Tema Shopify não tem etapa de build: o que está
   em assets/ é o que a loja serve. O protótipo (prototipo/) carrega ESTE
   arquivo, então o que se aprova lá é o que o tema renderiza.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── COR ──────────────────────────────────────────────────────────────────
     REGRA-MÃE (de FG): produto vive no CLARO, marca vive no CAMPO. Lá o campo
     era vinho; aqui é o slate do manual. A caixa de foto é um degrau mais
     ESCURA que a página, pra grade ler como fichas apoiadas, não buracos.

     Todos os pares abaixo foram MEDIDOS em 09/09/2026 (scripts/contraste.py):
     texto 4,5:1, texto grande e UI 3:1. Os valores do manual de marca
     (Monique Prada Design, 2025) entram literais onde passam; onde não
     passam, o token diz o que fazer no lugar. */

  /* Superfícies claras: onde o produto mora. */
  --cor-fundo: #f2f2f2;            /* Off-White do manual. A página */
  --cor-foto: #d8e2ea;             /* Blue-Gray do manual. Caixa de foto: card, galeria, íris.
                                      Um degrau ABAIXO da página, de propósito */
  --cor-superficie: #ffffff;       /* painel, campo de formulário, menu suspenso, drawer */
  --cor-superficie-baixa: #e9ecef; /* faixa de descanso, skeleton */

  /* Campo de marca: o slate. Campos inteiros (compromissos, rodapé, mega-menu
     mobile), não só acento. */
  --cor-marca: #4f6777;            /* Slate do manual. Texto invertido: 5,30:1 */
  --cor-marca-alto: #5b7587;       /* hover */
  --cor-marca-fundo: #3f5361;      /* profundidade dentro do campo. Texto invertido: 7,16:1 */

  /* 🔄 14/09/2026, Johny (cliente): "esse azul escuro é muito pesado, deixa o site
     formal; gosto dele em texto e na fonte; o público é feminino". O slate SAIU de
     todo campo grande e ficou como cor de TEXTO e de detalhe. Os campos passaram
     para os dois azuis claros do manual. Pares medidos (scripts/contraste.py):
       --cor-texto sobre --cor-campo-vivo 7,77:1 · sobre --cor-campo 12,37:1
       --cor-marca (texto) sobre --cor-campo 4,52:1 · --cor-texto-mudo sobre --cor-campo 4,53:1
     ⚠️ Slate sobre o azul-céu dá 2,84:1: em cima de --cor-campo-vivo o texto é
     SEMPRE --cor-texto, nunca o slate. */
  --cor-campo: #d8e2ea;            /* Blue-Gray do manual. Faixas: compromissos, rodapé */
  --cor-campo-vivo: #9eb6cf;       /* Sky Blue do manual. Barra de anúncio, estado ativo, hover dos cartões */

  /* ⚠️ OURO É ORNAMENTO, NÃO TEXTO. O Gold do manual dá 2,87:1 sobre a página
     e 1,84:1 sobre o slate. Vive em monograma, filete grande, selo, moldura
     de íris. Quando precisa virar LETRA, usa --cor-ouro-texto (5,09:1 sobre a
     página). Botão de ouro só com texto ESCURO por cima (5,05:1), nunca claro. */
  --cor-ouro: #ae895a;
  --cor-ouro-texto: #7e6236;
  --cor-ouro-claro: #d4b98a;       /* 3,14:1 sobre slate: só ícone grande ou rótulo grande */
  --degrade-ouro: linear-gradient(135deg, #6b4a1c 0%, #c9a76a 45%, #ae895a 60%, #6b4a1c 100%);

  /* Sky Blue do manual reprova como texto em tudo (2,84:1 no slate). Decorativo. */
  --cor-ceu: #9eb6cf;

  /* Texto sobre claro. Quase-preto FRIO (o manual é frio), nunca #000. */
  --cor-texto: #1b2126;            /* 14,5:1 */
  /* 🔄 14/09/2026, Mateus: "tem coisas que não dá para ler direito". Os dois tons de apoio
     escureceram um degrau: passavam no limite (4,53:1 sobre o azul-gris) e caíam abaixo
     do piso onde há sombra de objeto ou marca d'água atrás (medido por pixel: 3,91:1). */
  --cor-texto-mudo: #4d5b63;       /* 6,27:1 na página · 5,34:1 sobre azul-gris e caixa de foto */
  --cor-texto-sutil: #56666f;      /* 5,32:1 na página · 4,53:1 sobre azul-gris */

  /* Texto sobre o campo de slate. */
  --cor-invertido: #f2f2f2;        /* 5,30:1 */
  --cor-invertido-mudo: #d8e2ea;   /* 4,52:1 */

  /* Linhas */
  --cor-borda: #dfe3e6;            /* decorativa, sobre a página */
  --cor-borda-forte: #c2cad0;
  --cor-borda-campo: #7f8d95;      /* 3,05:1: componente de UI pede 3:1 */
  --cor-borda-invertida: #6c8292;  /* filete dentro do campo de slate */

  /* Semânticas (não mudam com tema) */
  --cor-erro: #a83a2e;
  --cor-ok: #2f6b4f;
  /* WhatsApp: cor da PLATAFORMA, não da marca. Aqui é SUPORTE, não conversão.
     Botão com rótulo: fundo verde + texto escuro (8,19:1). A bola flutuante
     com ícone branco (1,98:1) é a exceção única e consciente herdada de FG. */
  --cor-whatsapp: #25d366;
  --cor-branco-puro: #ffffff;       /* SÓ pro ícone do WhatsApp: branco-sobre-verde É o símbolo */
  --cor-whatsapp-alto: #1fbb5a;

  /* Véus sobre foto. A cor é UMA (o quase-preto frio) e a opacidade varia:
     `--veu` é setting da seção do herói (council 09/09: o véu era calibrado
     pra uma foto só). Celular soma 0,18; o véu do texto é 80% do chapado. */
  --cor-veu-rgb: 27 33 38;
  /* Pupila desenhada por cima da lente fotografada fora do olho (cartão do
     fornecedor, estampa plana): o centro dela é transparente e sai branco.
     Com a pupila, disco de cartão e macro de íris leem como a mesma coisa
     (13/09/2026, Mateus: "os ícones do explore por cor estão muito feios"). */
  --cor-pupila: #0b0d0f;
  --veu-foto-forte: rgb(27 33 38 / 0.6);     /* fundo da lista de cores e overlay do drawer */
  --veu-header: rgb(27 33 38 / 0.7);         /* faixa do header sobre foto (C10) */
  /* Sombra curta atrás do texto sobre foto (13/09/2026): não é enfeite, é o piso de
     contraste da letra fina quando cai sobre um reflexo claro da foto. */
  --sombra-texto: 0 1px 2px rgb(27 33 38 / 0.55), 0 0 18px rgb(27 33 38 / 0.35);
  /* Paralaxe: folga do invólucro em % da altura do bloco (CSS) e amplitude
     derivada dela no JS (8/15 da folga). Um número, dois consumidores. */
  --paralaxe-folga: 15;

  /* ── FORMA ────────────────────────────────────────────────────────────────
     Derivada da marca: a LENTE é um círculo perfeito, o CARTÃO do manual é reto.
       interativo herda a lente  → pill
       conteúdo herda o cartão   → reto (2px), como em FG */
  --raio-interativo: 9999px;
  --raio-conteudo: 2px;

  /* ── TIPOGRAFIA ───────────────────────────────────────────────────────────
     Dois papéis, como FG. Nenhuma variável carrega NOME de fonte (regra
     herdada: `--ff-bodoni` virou mentira em quatro arquivos no dia da troca).
       VOZ: serifa de hairline, a família livre mais próxima do wordmark e dos
            títulos do manual. Display, títulos, nome no card (20px+).
       UI:  a grotesca que o manual recomenda pro corpo. Nav, rótulo, botão,
            ficha técnica (com algarismo tabular), corpo.
     Carregadas em layout/theme.liquid (e no protótipo) do Google Fonts. */
  --ff-voz: "Cormorant Garamond", "Cormorant", ui-serif, Georgia, "Times New Roman", serif;
  --ff-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Parágrafo de leitura na voz (lead, apoio do herói, depoimento). Separado de --ff-voz
     porque serifa de hairline em 19px cansa: com a Amanda (traço muito fino) ele vira a UI. */
  --ff-leitura: var(--ff-voz);

  /* Escala fluida. Cormorant tem olho pequeno: os corpos da voz sobem ~10% em
     relação ao que FG usava com a Newsreader. */
  --t-micro: 0.6875rem;                              /* 11px: rótulo em caixa alta */
  --t-mini: 0.75rem;                                 /* 12px */
  --t-peq: 0.8125rem;                                /* 13px: ação em caixa alta */
  --t-corpo: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --t-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);   /* parágrafo de abertura, na voz */
  --t-card: 1.25rem;                                 /* 20px: nome do produto no card, na voz */
  --t-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --t-h2: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);
  --t-h1: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  /* Herói: precisa vencer uma foto de rosto e ceder em janela BAIXA (laptop
     1280x720 é desktop largo e janela baixa ao mesmo tempo). O `min()` faz a
     altura capar a largura. Lição medida em Cat's Eye. */
  --t-heroi: clamp(2.75rem, min(1.6rem + 5.2vw, 10svh), 6rem);
  --t-gigante: clamp(3rem, 12vw, 13rem);             /* wordmark do rodapé */

  --peso-leve: 300;
  --peso-corpo: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  --lh-apertada: 1.0;
  --lh-titulo: 1.08;
  --lh-corpo: 1.6;

  --tr-display: -0.015em;
  --tr-titulo: -0.01em;
  --tr-alta: 0.16em;                                 /* caixa alta miúda SEMPRE aberta */
  --tr-acao: 0.12em;

  /* ── ESPAÇO ───────────────────────────────────────────────────────────────
     Escala de 4px. Densidade 3: respiro alto. Listagem e ficha sobem pra 5. */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;

  --dobra: clamp(3.5rem, 2rem + 7vw, 8rem);          /* respiro vertical entre dobras */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --largura-max: 87.5rem;                            /* 1400px, como FG */
  --largura-texto: 38rem;                            /* medida de leitura */

  /* Header: duas alturas (alto com o wordmark, compacto só com o monograma).
     Token porque o herói sobe por baixo dele com margem negativa do mesmo valor. */
  --h-header: 6.5rem;                                /* 104px */
  --h-header-compacto: 4rem;                         /* 64px */
  --h-anuncio: 2.25rem;                              /* 36px, a barra rotativa */
  --h-logo: 2.25rem;                                 /* monograma no header alto */
  --h-logo-compacto: 1.875rem;

  /* ── MOVIMENTO ────────────────────────────────────────────────────────────
     Valores IDÊNTICOS ao shared/motion.ts de FG. Ritmo demorado e assentado.
     `ease`, `linear` e `ease-in-out` crus são PROIBIDOS em transição visível. */
  --dur-instant: 150ms;   /* feedback de toque, :active */
  --dur-fast: 280ms;      /* hover de botão, ícone, chip */
  --dur-base: 480ms;      /* troca de foto no card, acordeão, entrada de item */
  --dur-slow: 720ms;      /* drawer, mega-menu, entrada de seção */
  --dur-page: 900ms;      /* transição entre páginas */
  --dur-shimmer: 1200ms;  /* travessia do skeleton */
  --dur-slide: 6500ms;    /* tempo de cada banner do herói (setting da seção sobrescreve) */
  --dur-assentar: 7000ms; /* a foto do banner assenta (scale 1.06 → 1) enquanto está no ar */

  --curva-saida: cubic-bezier(0.16, 1, 0.3, 1);        /* percurso curto que entra */
  --curva-suave: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* superfície grande que aparece */
  --curva-ida-volta: cubic-bezier(0.65, 0, 0.35, 1);   /* vai e volta */
  /* ⚠️ Linear SÓ pra barra de progresso do banner: ali ela mede TEMPO, e tempo
     não acelera. Em qualquer transição visível continua proibida. */
  --curva-tempo: linear;

  --cascata: 60ms;
  --cascata-teto: 8;
  /* Atraso do conteúdo dentro de uma casca que abre: 80% da duração dela. */
  --atraso-conteudo: calc(var(--dur-slow) * 0.8);

  /* ── SOMBRA ───────────────────────────────────────────────────────────────
     Em tema claro a sombra existe de verdade, mas é rara: só o que FLUTUA
     (drawer, menu suspenso, botão de ouro sobre foto). Card não tem sombra. */
  --sombra-flutua: 0 10px 34px -10px rgb(27 33 38 / 0.22), 0 2px 8px -3px rgb(27 33 38 / 0.12);
  --sombra-drawer: -16px 0 48px -12px rgb(27 33 38 / 0.22);
  /* Objeto recortado sem fundo (manual de marca): a sombra do mockup ia embora com o fundo;
     esta devolve o peso no chão. drop-shadow segue o contorno do PNG, box-shadow não. */
  /* 🔄 14/09/2026: era 24px de desfoque e virava mancha ao lado da sacola (Mateus: "sombra estranha"). Só contato. */
  --sombra-objeto: drop-shadow(0 6px 8px rgb(27 33 38 / 0.14));

  --z-header: 100;
  --z-painel: 90;
  --z-drawer: 200;
  --z-flutuante: 150;
}