/* =========================================================================
   Lunettic — tokens de marca
   =========================================================================
   Fonte unica de verdade do sistema visual. Os valores aqui saem da analise
   dos mockups originais (amostragem de pixel, nao estimativa).

   Este arquivo tem um par: /tema/tema-lunettic.css, que leva os MESMOS
   valores para os tokens --loja-* da vitrine Tenkla. Mudou aqui, muda la.
   Se os dois divergirem, a passagem entre site e loja deixa de ser invisivel.

   Nao ha tema escuro. A marca e branco, preto e rosa, e o mockup se compromete
   com esse mundo — inverter descaracteriza. E uma escolha, nao um esquecimento.
   ========================================================================= */

:root {

    /* --- Cor: nucleo da marca ------------------------------------------- */
    --rosa:              #F88A92;   /* o acento. Hero, precos em sale, hover  */
    --rosa-suave:        #F8ADB2;   /* blocos inteiros, dropdown, badges      */
    --carvao:            #494A49;   /* neutro escuro, levemente esverdeado    */
    --preto:             #000000;   /* texto e filetes. Puro, sem suavizar    */
    --branco:            #FFFFFF;   /* o fundo. Puro, sem creme               */

    /* --- Cor: derivadas -------------------------------------------------- */
    /* Nao existem no material original. Criadas para estados que o mockup
       estatico nao mostra (hover, fundo de badge). Mantidas na mesma familia. */
    --rosa-escuro:       #D9646F;   /* hover sobre o rosa                     */
    --rosa-palido:       #FDE7E9;   /* fundo de badge e destaque leve         */

    /* --- Cor: campanha Looney Club --------------------------------------- */
    /* Exclusivas da arte do clube. Nao usar no site geral. */
    --teal:              #0083A6;
    --bege:              #CFCBC0;

    /* --- Cor: papeis de interface ---------------------------------------- */
    --fundo:             var(--branco);
    --superficie:        var(--branco);   /* cards nao tem fundo proprio      */
    --borda:             #E8E8E8;
    --texto:             var(--preto);
    --texto-suave:       var(--carvao);
    --texto-fraco:       #8F8F8F;
    --acento:            var(--rosa);
    --acento-hover:      var(--rosa-escuro);

    /* --- Tipografia ------------------------------------------------------ */

    /* ED Manteca Black e a BLACKLETTER da marca — a das frases grandes:
       "The wild side of us.", "Welcome to the Looney Club.", "Join the club".
       Nao serve para titulo de secao nem para nome de produto: em texto
       menor ela para de ser leitura e vira ornamento. Use so onde a marca
       esta falando de si mesma. */
    --fonte-display:     'ED Manteca', Georgia, serif;

    /* Os titulos de secao do mockup usam uma condensada pesada que NAO veio
       nos pacotes de fonte — e a unica peca do sistema que ainda falta.
       Ate ela aparecer, o suplente e o peso 900 da propria Circular Std:
       nao e condensada, mas e da familia da marca, o que erra menos do que
       trazer uma quarta fonte de fora. */
    --fonte-titulo:      'Circular Std', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Helvetica, Arial, sans-serif;

    --fonte-corpo:       'Circular Std', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Helvetica, Arial, sans-serif;

    /* Escala tipografica. Fluida entre celular e desktop — mobile-first,
       entao o menor valor de cada clamp e o que vale no celular. */
    --t-xs:              0.75rem;                        /* 12px  legendas    */
    --t-sm:              0.875rem;                       /* 14px  meta, nav   */
    --t-base:            1rem;                           /* 16px  corpo       */
    --t-md:              clamp(1.0625rem, 1.6vw, 1.1875rem);
    --t-lg:              clamp(1.25rem,  2.4vw, 1.5rem);
    --t-xl:              clamp(1.625rem, 3.6vw, 2.25rem);
    --t-2xl:             clamp(2.125rem, 5.5vw, 3.25rem);
    --t-hero:            clamp(2.75rem,  9vw,   6.5rem);  /* headline blackletter */

    --peso-normal:       400;
    --peso-medio:        500;
    --peso-forte:        700;
    --peso-black:        900;

    --altura-titulo:     0.98;
    --altura-corpo:      1.6;
    --entre-letras-nav:  0.02em;
    --entre-letras-caps: 0.12em;   /* rotulos em caixa alta                  */

    /* --- Espaco ---------------------------------------------------------- */
    --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-secao:           clamp(3rem, 8vw, 6rem);   /* respiro entre secoes    */
    --gutter:            clamp(1.125rem, 4vw, 2.5rem);
    --largura-max:       1600px;   /* o mockup e largo: 3316px a 2x           */
    --largura-texto:     68ch;

    /* Espaco que a lista de navegacao da direita reserva para a sacola, que
       ocupa a mesma celula do grid no desktop. Icone de 22px mais respiro. */
    --espaco-sacola:     2.75rem;

    /* --- Forma ----------------------------------------------------------- */
    /* Zero, e nao e engano: nao existe um unico canto arredondado nos dois
       mockups. E o traco mais definidor do sistema. Ver tema-lunettic.css. */
    --raio:              0;
    --raio-sm:           0;

    /* Layout plano. A separacao vem de filete e de espaco em branco, nunca
       de elevacao. O hover muda cor, nao sombra. */
    --sombra:            none;
    --sombra-hover:      none;

    /* --- Movimento -------------------------------------------------------- */
    /* Igual ao --loja-trans da vitrine, de proposito. E o unico token cujo
       valor nao sai da marca: sai da plataforma. Se o site usasse a propria
       curva, a mesma acao teria um tempo aqui e outro na loja, e a passagem
       entre os dois dominios deixaria de ser invisivel. */
    --transicao:         .22s cubic-bezier(.4, 0, .2, 1);
}