/* ==========================================================================
   LOJAS MARI — TOKENS DA MARCA
   Gerado em 10/09/2026 · fonte da verdade do sistema visual

   Os valores NÃO foram inventados: foram extraídos do site institucional
   em produção (site/institucional/index.html). Este arquivo documenta a
   marca que já existe.

   Tipografia: TRÊS famílias, cada uma com um papel fechado.
     Gasoek One ..... display. Chamada curta e gritada. Peso único 400.
                      https://fonts.google.com/specimen/Gasoek+One
     Baloo Bhai 2 ... título e subtítulo. Pesos 400 a 800 (variável).
                      https://fonts.google.com/specimen/Baloo+Bhai+2
     Poppins ........ corpo, botão, legenda, interface. Pesos 400 a 800.
                      https://fonts.google.com/specimen/Poppins
   A regra que segura o sistema: cada uma no seu território. Gasoek nunca
   em texto corrido; Baloo nunca em corpo longo; Poppins nunca na chamada
   principal de um cartaz.

   COMO USAR
   Peça nenhuma consome a camada 1 (valor bruto). Carrossel, proposta,
   apostila e página usam só a camada 2 (semântica). Trocar a cor da marca
   é editar uma linha.

   CONTRASTE (WCAG 2.1, calculado em 10/09/2026)
   Aprovados para texto normal (≥4.5:1):
     ink sobre branco .............. 17.52:1
     ink sobre creme ............... 16.55:1
     marsala-dark sobre branco ..... 13.06:1
     marsala-dark sobre creme ...... 12.33:1
     marsala sobre branco ........... 9.33:1
     marsala sobre creme ............ 8.81:1
     rosa-claro sobre marsala ....... 6.96:1
     muted sobre branco ............. 6.45:1
     rosa-medio sobre marsala ....... 6.32:1
     muted sobre creme .............. 6.09:1
     rosa-escuro sobre marsala-dark . 5.96:1
     brand-light sobre marsala-dark . 5.03:1

   REPROVADOS para texto normal — atenção, é onde o sistema erra hoje:
     laranja #FF4D00 sobre creme .... 3.14:1  ✗
     laranja #FF4D00 sobre branco ... 3.33:1  ✗
     branco sobre laranja #FF4D00 ... 3.33:1  ✗
     brand-light sobre marsala ...... 3.59:1  ✗

   O laranja da marca só passa como texto GRANDE (≥24px, ou ≥18.7px em
   bold) e como elemento gráfico (ícone, filete, fundo de card). Para
   texto pequeno e para botão com texto branco existe --laranja-texto
   (#CF3E00), mesmo matiz escurecido: 4.57:1 no creme, 4.84:1 no branco
   e 4.84:1 com branco por cima. Ver o bloco "acessível" abaixo.
   ========================================================================== */

:root {

  /* ======================================================================
     CAMADA 1 — BRUTA
     A escala. Sem opinião de uso. Nenhuma peça consome daqui direto.
     ====================================================================== */

  /* Laranja — a cor de destaque da marca (matiz 18°) */
  --laranja-50:  #FFF1EA;
  --laranja-100: #FFDFD1;
  --laranja-200: #FFBE9E;
  --laranja-300: #FF9C6B;
  --laranja-400: #FF7A33;   /* brand-light do site */
  --laranja-500: #FF4D00;   /* ⬅ A COR DA MARCA */
  --laranja-600: #E64500;   /* hover do site */
  --laranja-700: #CF3E00;   /* variante acessível para texto */
  --laranja-800: #A63200;
  --laranja-900: #7A2500;

  /* Marsala — a cor institucional, fundo de seção e texto de título */
  --marsala-50:  #FBF2F0;
  --marsala-100: #F3D9D2;
  --marsala-200: #E9CFC8;
  --marsala-300: #C9A89F;
  --marsala-400: #A85F58;
  --marsala-500: #7A2E2A;   /* marsala do site */
  --marsala-600: #6B2724;
  --marsala-700: #561F1C;   /* marsala-dark do site */
  --marsala-800: #3F1614;
  --marsala-900: #2A0F0D;

  /* Neutros quentes — uma família só, toda quente (nada de cinza frio) */
  --neutro-0:   #FFFFFF;
  --neutro-50:  #FFF7F2;   /* creme do site */
  --neutro-100: #F0DED6;   /* linha/borda do site */
  --neutro-200: #E0CCC3;
  --neutro-300: #C4ABA2;
  --neutro-400: #9B8078;
  --neutro-500: #6E5A55;   /* muted do site */
  --neutro-600: #55443F;
  --neutro-700: #3D302C;
  --neutro-800: #2A211E;
  --neutro-900: #1B1918;   /* ink do site */

  /* Sinalização — usar com parcimônia, não fazem parte da marca */
  --verde-500:    #1F7A44;
  --amarelo-500:  #B26A00;
  --vermelho-500: #B3261E;
  --whatsapp:     #25D366;


  /* ======================================================================
     CAMADA 2 — SEMÂNTICA
     É daqui que toda peça consome.
     ====================================================================== */

  /* Superfícies */
  --bg:               var(--neutro-50);    /* fundo padrão da página */
  --bg-alt:           var(--neutro-0);     /* seção alternada, branca */
  --bg-escuro:        var(--marsala-500);  /* seção em marsala */
  --bg-escuro-forte:  var(--marsala-700);  /* header, rodapé, card sobre marsala */
  --surface:          var(--neutro-0);     /* card sobre fundo claro */
  --surface-escuro:   rgba(255,255,255,.05); /* card sobre fundo marsala */

  /* Texto */
  --text:              var(--neutro-900);
  --text-muted:        var(--neutro-500);
  --text-titulo:       var(--marsala-700);
  --text-sobre-escuro: var(--neutro-0);
  --text-sobre-escuro-muted: var(--marsala-200);

  /* Bordas */
  --border:        var(--neutro-100);
  --border-escuro: rgba(255,255,255,.10);

  /* Destaque */
  --accent:            var(--laranja-500);
  --accent-hover:      var(--laranja-600);
  --accent-contrast:   var(--neutro-0);   /* o que vai POR CIMA do accent */
  --accent-claro:      var(--laranja-400); /* destaque sobre fundo escuro */
  --accent-suave:      rgba(255,77,0,.10); /* fundo de ícone e pill */

  /* Sinalização */
  --success: var(--verde-500);
  --warning: var(--amarelo-500);
  --danger:  var(--vermelho-500);


  /* ---- Bloco acessível --------------------------------------------------
     Use estes DOIS tokens sempre que o laranja for texto pequeno ou fundo
     de botão com texto branco. Mesmo matiz, escuro o bastante pra passar
     em 4.5:1. Fora desses dois casos, o --accent original continua valendo.
     ---------------------------------------------------------------------- */
  --accent-texto:       var(--laranja-700);  /* laranja legível em corpo de texto */
  --accent-botao:       var(--laranja-700);  /* fundo de botão com texto branco */
  --accent-botao-hover: var(--laranja-800);


  /* ======================================================================
     TIPOGRAFIA
     Uma família só: Poppins. Escala modular razão 1.25, âncora 16px.
     ====================================================================== */

  /* Uma variável por PAPEL, não por nome de fonte. A peça pede
     --fonte-display, não "Gasoek" — se a marca trocar de fonte um dia,
     muda aqui e vale para tudo. */
  --fonte-display: 'Gasoek One', 'Baloo Bhai 2', Impact, system-ui, sans-serif;
  --fonte-titulo:  'Baloo Bhai 2', 'Poppins', system-ui, sans-serif;
  --fonte:         'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Gasoek One só existe no peso 400 — não pedir bold nela, o navegador
     engorda a letra na força bruta e o desenho quebra. */
  --peso-display-fonte: 400;

  --fs-xs:   0.75rem;   /* 12px — etiqueta, legenda */
  --fs-sm:   0.875rem;  /* 14px — olho, texto de apoio */
  --fs-base: 1rem;      /* 16px — corpo */
  --fs-lg:   1.125rem;  /* 18px — corpo destacado, lead */
  --fs-xl:   1.25rem;   /* 20px — título de card */
  --fs-2xl:  1.5rem;    /* 24px — subtítulo */
  --fs-3xl:  1.875rem;  /* 30px — título de seção (mobile) */
  --fs-4xl:  2.25rem;   /* 36px — título de seção */
  --fs-5xl:  3rem;      /* 48px — número grande, chamada em Gasoek */
  --fs-6xl:  3.75rem;   /* 60px — display do hero, Gasoek */

  /* Quatro pesos, não dois */
  --peso-corpo:    400;
  --peso-destaque: 500;
  --peso-subtitulo:600;
  --peso-titulo:   700;
  --peso-display:  800;

  /* Tracking e leading variam com o tamanho — é o que faz parecer desenhado.
     A Gasoek já nasce apertada: no display o tracking é 0, não negativo. */
  --tracking-display: 0;        --lh-display: 1.05;
  --tracking-display-poppins: -0.02em;  /* se o display cair na Poppins */
  --tracking-titulo:  -0.01em;  --lh-titulo:  1.20;
  --tracking-corpo:    0;       --lh-corpo:   1.60;
  --tracking-olho:     0.19em;  --lh-olho:    1.20;  /* caixa alta, 3px em 16px */


  /* ======================================================================
     ESPAÇAMENTO — grade de 4px. Sem número solto.
     ====================================================================== */

  --sp-1:  0.25rem;  /*  4px */
  --sp-2:  0.5rem;   /*  8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-11: 2.75rem;  /* 44px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px — respiro entre seções (mobile) */
  --sp-24: 6rem;     /* 96px — respiro entre seções */


  /* ======================================================================
     FORMA — a marca é arredondada. Menor por dentro, maior por fora.
     ====================================================================== */

  --radius-sm:   0.5rem;   /*  8px — pill, etiqueta */
  --radius-md:   0.75rem;  /* 12px — elemento interno */
  --radius-lg:   1rem;     /* 16px — card */
  --radius-xl:   1.5rem;   /* 24px — card grande, imagem */
  --radius-full: 9999px;   /* botão e avatar — a marca usa botão totalmente redondo */


  /* ======================================================================
     SOMBRA — leve, tingida de marrom-quente. Nunca preto puro.
     ====================================================================== */

  --shadow-sm: 0 1px 2px rgba(86,31,28,.06);
  --shadow-md: 0 10px 15px -3px rgba(86,31,28,.10), 0 4px 6px -4px rgba(86,31,28,.10);
  --shadow-lg: 0 20px 25px -5px rgba(86,31,28,.12), 0 8px 10px -6px rgba(86,31,28,.10);
  --shadow-xl: 0 25px 50px -12px rgba(86,31,28,.22);


  /* ======================================================================
     LAYOUT
     ====================================================================== */

  --container:      72rem;   /* 1152px — largura do site */
  --container-texto: 68ch;   /* leitura corrida */
  --header-altura:  84px;    /* usado no scroll-margin das âncoras */

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg: 1024px;

  --transicao: .15s cubic-bezier(.4,0,.2,1);
}