/* ============================================================
   CASA SABERES DE RAÍZES — SISTEMA VISUAL
   01. TOKENS
   Base única de decisões. Nenhum componente define valor cru.
   ============================================================ */

:root {

  /* ---------- 1.1 PALETA BRUTA (identidade) ---------------- */

  /* Creme */
  --creme-100: #EAE8D3;   /* Creme Claro  — fundo mestre        */
  --creme-300: #F0DDA4;   /* Creme Dourado — fundo quente       */

  /* Escuros */
  --marrom-900: #33110D;  /* Marrom Terra — texto e fundo densos */
  --mata-900:   #17330C;  /* Verde Mata Profundo — fundo alternativo */

  /* Terracota */
  --terra-700: #8C381B;   /* Terracota Queimada */
  --terra-500: #AB5F31;   /* Terracota Barro    */

  /* Verde */
  --verde-600: #338875;   /* Verde Folha  */
  --verde-400: #6DAD9E;   /* Verde Água   */

  /* Dourado */
  --ouro-600: #DBB04F;    /* Dourado Velho */
  --ouro-400: #F7D959;    /* Dourado Sol   */

  /* Detalhe */
  --vermelho: #992222;    /* Vermelho Profundo — SOMENTE detalhe */

  /* ---------- 1.2 SUPERFÍCIES DERIVADAS -------------------
     Não são cores novas: são clareamentos/escurecimentos
     calculados a partir da paleta bruta.                      */

  --creme-papel:  color-mix(in srgb, var(--creme-100) 76%, #FFFFFF);
  --creme-fundo:  color-mix(in srgb, var(--creme-100) 94%, var(--marrom-900));
  --marrom-800:   color-mix(in srgb, var(--marrom-900) 88%, var(--terra-700));
  --mata-800:     color-mix(in srgb, var(--mata-900) 84%, var(--verde-600));

  /* ---------- 1.3 TOKENS SEMÂNTICOS ------------------------ */

  /* Background */
  --bg-primary:    var(--creme-100);
  --bg-secondary:  var(--creme-300);
  --bg-deep:       var(--marrom-900);
  --bg-mata:       var(--mata-900);
  --bg-terra:      var(--terra-700);

  /* Surface */
  --surface-light: var(--creme-papel);
  --surface-warm:  var(--creme-300);
  --surface-sunk:  var(--creme-fundo);
  --surface-dark:  var(--marrom-800);
  --surface-mata:  var(--mata-800);

  /* Text */
  --text-primary:     var(--marrom-900);
  --text-secondary:   color-mix(in srgb, var(--marrom-900) 78%, var(--creme-100));
  --text-muted:       color-mix(in srgb, var(--marrom-900) 66%, var(--creme-100));
  --text-on-dark:     var(--creme-100);
  --text-on-dark-sec: color-mix(in srgb, var(--creme-100) 70%, var(--marrom-900));
  --text-accent:      var(--terra-700);
  --text-gold:        var(--ouro-600);

  /* Title */
  --title-primary: var(--marrom-900);
  --title-accent:  var(--terra-700);
  --title-on-dark: var(--creme-300);
  --title-gold:    var(--ouro-400);

  /* Border */
  --border-light:   color-mix(in srgb, var(--marrom-900) 16%, transparent);
  --border-medium:  color-mix(in srgb, var(--marrom-900) 34%, transparent);
  --border-strong:  var(--marrom-900);
  --border-on-dark: color-mix(in srgb, var(--creme-100) 26%, transparent);
  --border-gold:    var(--ouro-600);
  --border-terra:   var(--terra-500);

  /* Ação / CTA — o dourado é reservado à ação principal */
  --acao-primaria-bg:      var(--ouro-600);
  --acao-primaria-texto:   var(--marrom-900);
  --acao-primaria-hover:   var(--ouro-400);

  --acao-secundaria-bg:    var(--terra-700);
  --acao-secundaria-texto: var(--creme-100);
  --acao-secundaria-hover: var(--terra-500);

  --acao-outline-borda:    var(--border-strong);
  --acao-outline-texto:    var(--marrom-900);
  --acao-outline-hover-bg: color-mix(in srgb, var(--marrom-900) 8%, transparent);

  --acao-whats-bg:         var(--verde-600);
  --acao-whats-texto:      var(--creme-100);
  --acao-whats-hover:      color-mix(in srgb, var(--verde-600) 82%, var(--mata-900));

  --foco-anel: var(--terra-500);

  /* Estado / Feedback */
  --estado-sucesso: var(--verde-600);
  --estado-info:    var(--verde-400);
  --estado-atencao: var(--ouro-600);
  --estado-alerta:  var(--vermelho);
  --estado-off:     var(--text-muted);

  /* ---------- 1.4 TIPOGRAFIA -------------------------------
     A fonte da marca vem primeiro. O fallback web assume
     quando Duper / Contax Sans não estão licenciadas no host. */

  --fonte-display: "Duper", "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --fonte-texto:   "Contax Sans", "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  /* Escala fluida */
  --t-display:  clamp(3rem, 1.6rem + 6.2vw, 6.5rem);
  --t-h1:       clamp(2.35rem, 1.4rem + 4.2vw, 4.25rem);
  --t-h2:       clamp(1.85rem, 1.25rem + 2.6vw, 2.875rem);
  --t-h3:       clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --t-eyebrow:  0.75rem;
  --t-body-lg:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-body:     1.03125rem;
  --t-small:    0.90625rem;
  --t-caption:  0.78125rem;
  --t-button:   0.9375rem;
  --t-nav:      0.875rem;

  /* Altura de linha */
  --lh-display: 0.94;
  --lh-h1:      1.0;
  --lh-h2:      1.07;
  --lh-h3:      1.2;
  --lh-corpo:   1.68;
  --lh-curto:   1.45;

  /* Entreletra */
  --ls-display: -0.025em;
  --ls-h1:      -0.02em;
  --ls-h2:      -0.015em;
  --ls-h3:      -0.008em;
  --ls-eyebrow: 0.17em;
  --ls-corpo:   0.002em;
  --ls-botao:   0.015em;
  --ls-nav:     0.04em;

  /* Peso */
  --w-display: 700;
  --w-titulo:  600;
  --w-medio:   500;
  --w-corpo:   400;

  /* ---------- 1.5 ESPAÇAMENTO ------------------------------ */

  --esp-1:  0.25rem;  /*   4 */
  --esp-2:  0.5rem;   /*   8 */
  --esp-3:  0.75rem;  /*  12 */
  --esp-4:  1rem;     /*  16 */
  --esp-5:  1.5rem;   /*  24 */
  --esp-6:  2rem;     /*  32 */
  --esp-7:  2.5rem;   /*  40 */
  --esp-8:  3.5rem;   /*  56 */
  --esp-9:  4.5rem;   /*  72 */
  --esp-10: 6rem;     /*  96 */
  --esp-11: 8rem;     /* 128 */
  --esp-12: 10rem;    /* 160 */

  /* Espaçamento semântico */
  --margem-externa:   clamp(1.25rem, 4.5vw, 4rem);
  --largura-max:      77.5rem;  /* 1240px */
  --largura-texto:    62ch;
  --largura-estreita: 46rem;

  --secao-y:          clamp(4.5rem, 8vw, 10rem);
  --secao-y-densa:    clamp(3rem, 5vw, 5.5rem);
  --gap-titulo-texto: var(--esp-5);
  --gap-texto-cta:    var(--esp-7);
  --gap-img-conteudo: clamp(2rem, 4vw, 4rem);
  --gap-grid:         clamp(1rem, 2vw, 2rem);
  --pad-card:         clamp(1.5rem, 2.4vw, 2.5rem);
  --pad-card-denso:   clamp(1.25rem, 1.8vw, 1.75rem);

  /* ---------- 1.6 FORMAS ----------------------------------- */

  --raio-xs:   4px;
  --raio-sm:   8px;
  --raio-md:   14px;
  --raio-lg:   22px;
  --raio-xl:   32px;
  --raio-pill: 999px;

  /* Arco: topo redondo, base assentada. Assinatura da Casa. */
  --raio-arco:     48% 48% var(--raio-md) var(--raio-md) / 40% 40% var(--raio-md) var(--raio-md);
  --raio-arco-sut: 34% 34% var(--raio-lg) var(--raio-lg) / 22% 22% var(--raio-lg) var(--raio-lg);
  --raio-seixo:    52% 48% 46% 54% / 58% 42% 58% 42%;

  /* Traços */
  --traco-fino:   1px;
  --traco-medio:  1.5px;
  --traco-grosso: 2.5px;
  --traco-icone:  1.75;

  /* Sombra: impressão deslocada, nunca difusa */
  --sombra-impressa:       5px 5px 0 var(--marrom-900);
  --sombra-impressa-terra: 5px 5px 0 var(--terra-700);
  --sombra-assento:        0 1px 0 color-mix(in srgb, var(--marrom-900) 14%, transparent);

  /* ---------- 1.7 MOVIMENTO --------------------------------
     Curvas fortes: as nativas do CSS sao fracas demais.
     Regra: so transform e opacity (clip-path liberado).
     Nunca ease-in em UI. UI abaixo de 300ms.              */

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* entrada e saida */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);     /* movimento na tela */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* painel deslizante */
  --ease-hover:  ease;                                /* cor e hover */

  --dur-toque:     160ms;  /* press feedback              */
  --dur-hover:     180ms;  /* hover, cor, borda           */
  --dur-menu:      200ms;  /* dropdown, popover, accordion */
  --dur-painel:    260ms;  /* modal, drawer               */
  --dur-revelacao: 600ms;  /* scroll reveal (editorial)   */
  --stagger:        60ms;  /* entrada em grupo            */

  /* ---------- 1.8 TEXTURA ---------------------------------- */

  --op-papel:     0.055;
  --op-grao:      0.09;
  --op-mineral:   0.16;
  --op-vegetal:   0.10;
  --op-impressao: 0.30;

  /* Vazado da marca: cor do fundo sob o arco */
  --marca-vazio: var(--creme-100);
}

/* Contexto escuro: inverte os tokens de leitura sem trocar a paleta */
.ctx-escuro {
  --text-primary:   var(--text-on-dark);
  --text-secondary: var(--text-on-dark-sec);
  --text-muted:     color-mix(in srgb, var(--creme-100) 62%, var(--marrom-900));
  --title-primary:  var(--title-on-dark);
  --title-accent:   var(--ouro-400);
  --text-accent:    var(--ouro-400);
  --border-light:   var(--border-on-dark);
  --border-medium:  color-mix(in srgb, var(--creme-100) 40%, transparent);
  --border-strong:  var(--creme-100);
  --surface-light:  color-mix(in srgb, var(--creme-100) 8%, transparent);
  --surface-sunk:   color-mix(in srgb, var(--marrom-900) 55%, #000);
  --acao-outline-borda:    var(--creme-100);
  --acao-outline-texto:    var(--creme-100);
  --acao-outline-hover-bg: color-mix(in srgb, var(--creme-100) 12%, transparent);
  --foco-anel: var(--ouro-400);
  --marca-vazio: var(--marrom-900);
}

.fundo-escuro, .fundo-mata, .fundo-terra, .cat-lateral, .rodape, .nav--escura {
  --marca-vazio: var(--marrom-900);
}