/* ==========================================================================
   Doce Capricho — Design Tokens
   Fonte: "Manual de Marca - Doce Capricho".
   Espelha config/marca.php. Ao alterar aqui, alterar lá.

   Regra de acessibilidade do projeto — contrastes medidos, não estimados:

     branco sobre #DD74A1 (rosa-400) ....  2,96:1  REPROVA em qualquer tamanho
     cacau  sobre #DD74A1 ...............  4,38:1  só a partir de 24px
     branco sobre #B34674 (rosa-600) ....  5,19:1  aprovado em AA

   Portanto: o rosa da marca (#DD74A1) é cor de SUPERFÍCIE e de DECORAÇÃO —
   nunca recebe texto por cima. O botão primário usa rosa-600, que é da mesma
   família e passa em AA com texto branco. Texto de leitura é sempre cacau.
   ========================================================================== */

:root {
    /* --- Paleta oficial ------------------------------------------------- */
    --dc-rosa:        #DD74A1;  /* Pantone 2045 C */
    --dc-rosa-claro:  #F7CED7;  /* Pantone 706 C  */
    --dc-creme:       #FFE8D1;
    --dc-cacau:       #623412;  /* Pantone 732 C  */

    /* --- Acréscimos do meio digital ------------------------------------- */
    --dc-dourado:     #C9A227;  /* acento de luxo — nunca cor de ação */
    --dc-branco:      #FFFDFB;

    /* --- Escala de rosa -------------------------------------------------- */
    --rosa-50:   #FDF4F7;
    --rosa-100:  #F7CED7;   /* oficial */
    --rosa-200:  #F0B3C4;
    --rosa-300:  #E896B0;
    --rosa-400:  #DD74A1;   /* oficial — base */
    --rosa-500:  #CE5A8B;
    --rosa-600:  #B34674;   /* 4.5:1 sobre branco — único rosa válido p/ texto */
    --rosa-700:  #8F375C;

    /* --- Escala de cacau -------------------------------------------------- */
    --cacau-100: #F4E8DE;
    --cacau-200: #E7D3C4;
    --cacau-300: #D3B098;
    --cacau-400: #B88A68;
    --cacau-500: #9A6640;
    --cacau-600: #7D4A22;
    --cacau-700: #623412;   /* oficial */
    --cacau-800: #4C2810;
    --cacau-900: #3A1E0A;

    /* --- Escala de creme -------------------------------------------------- */
    --creme-50:  #FFF9F2;
    --creme-100: #FFF2E4;
    --creme-200: #FFE8D1;   /* oficial */
    --creme-300: #F5D8BC;

    /* --- As camadas da loja ------------------------------------------------
       O site repete a proporção do salão: parede clara dominando, UMA parede
       forte por página, mesas brancas sob cada foto, madeira no piso e
       dourado nas luminárias. Toda foto de produto aparece sobre branco — é o
       que impede o rosa de competir com a comida.                            */
    --cor-ambiente:         var(--rosa-50);    /* o fundo de quase tudo      */
    --cor-parede:           var(--rosa-100);   /* faixas de seção            */
    --cor-destaque:         var(--rosa-400);   /* uma vez por página         */
    --cor-mesa:             var(--dc-branco);  /* todo card e toda foto      */
    --dc-madeira:           var(--cacau-400);  /* aterra o rosa              */

    /* --- Papéis semânticos ------------------------------------------------ */
    --cor-fundo:            var(--cor-ambiente);
    --cor-superficie:       var(--cor-mesa);
    --cor-superficie-suave: var(--cor-parede);
    --cor-borda:            var(--rosa-300);
    --cor-borda-suave:      var(--rosa-200);

    --cor-texto:            var(--cacau-800);
    --cor-texto-suave:      var(--cacau-600);
    --cor-texto-inverso:    var(--dc-branco);

    /* Ação: rosa-600. O rosa-400 da marca não sustenta texto por cima. */
    --cor-acao:             var(--rosa-600);
    --cor-acao-hover:       var(--rosa-700);
    --cor-acao-ativa:       var(--rosa-700);
    --cor-acao-texto:       var(--dc-branco);
    --cor-link:             var(--rosa-600);
    --cor-foco:             var(--rosa-600);

    /* Rosa da marca: fundos, faixas, elementos decorativos. Sem texto em cima. */
    --cor-marca:            var(--rosa-400);

    /* Dourado: luminárias e relevo do letreiro. Fios finos e detalhes —
       nunca área grande, nunca botão. Não passa em contraste como texto.     */
    --cor-ouro:             var(--dc-dourado);

    --cor-sucesso:  #4A7C59;
    --cor-atencao:  #B8862B;
    --cor-erro:     #A83E36;

    /* --- Tipografia -------------------------------------------------------
       Collingar (serifa do logotipo) é comercial e não pode ser webfont sem
       licença. Títulos usam Cormorant Garamond (OFL). O logotipo entra
       como SVG, preservando o desenho original.                             */
    --fonte-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --fonte-script:  'Dancing Script', 'Brush Script MT', cursive;
    --fonte-texto:   'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --peso-regular:  400;
    --peso-medio:    500;
    --peso-semi:     600;
    --peso-bold:     700;

    /* Escala fluida — mesmo ritmo do mobile ao desktop */
    --txt-xs:   0.75rem;
    --txt-sm:   0.875rem;
    --txt-base: 1rem;
    --txt-lg:   1.125rem;
    --txt-xl:   clamp(1.25rem, 1.1rem + 0.6vw,  1.5rem);
    --txt-2xl:  clamp(1.5rem,  1.3rem + 1vw,    2rem);
    --txt-3xl:  clamp(2rem,    1.6rem + 1.8vw,  2.75rem);
    --txt-4xl:  clamp(2.5rem,  1.9rem + 3vw,    4rem);

    --altura-apertada: 1.15;
    --altura-normal:   1.5;
    --altura-solta:    1.7;

    --tracking-largo: 0.14em;  /* "CONFEITARIA ARTESANAL" */

    /* --- Espaçamento (base 4px) ------------------------------------------ */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  3rem;
    --sp-8:  4rem;
    --sp-9:  6rem;
    --sp-10: 8rem;

    /* --- Formas ------------------------------------------------------------ */
    --raio-sm:   6px;
    --raio-md:   12px;
    --raio-lg:   20px;
    --raio-xl:   32px;
    --raio-pill: 999px;

    /* Sombras quentes — cinza puro suja a paleta */
    --sombra-sm: 0 1px 2px rgba(98, 52, 18, 0.06);
    --sombra-md: 0 4px 16px rgba(98, 52, 18, 0.08);
    --sombra-lg: 0 12px 40px rgba(98, 52, 18, 0.10);

    /* --- Layout ------------------------------------------------------------ */
    --largura-conteudo: 1200px;
    --largura-texto:    68ch;
    --gutter:           clamp(1rem, 4vw, 2.5rem);

    --transicao: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    :root { --transicao: 0ms; }
}