/* ==========================================================================
   Dr. Davi Klava — Design tokens · Design 2.0 (13/08/2026)
   Evolução "consultório editorial" sobre o DS extraído do Elementor:
   paleta e componentes da marca preservados; tipografia, escala, sombras
   e ritmo elevados. Fonte única de verdade — nenhum valor de cor, fonte
   ou espaçamento deve ser escrito fora deste arquivo.
   Breakpoints do projeto: 1024px (tablet) e 767px (mobile).
   ========================================================================== */

:root {
  /* --- Cores: marca --- */
  --color-brown:            #684C39;
  --color-brown-dark:       #4E3A2D;
  --color-teal:             #469EA0;
  --color-teal-light:       #739FA0;

  /* --- Cores: superfícies --- */
  --color-white:            #FFFFFF;
  --color-cream:            #FAF7F3;
  --color-beige:            #E9E3DA;
  --color-sand:             #F6F0E7;   /* tile de ícone, fundos de apoio */
  --color-brown-deep:       #2A1E15;   /* faixa de créditos do rodapé */

  /* --- Cores: texto --- */
  --color-text:             #5B534C;
  --color-text-muted:       #6E655C;
  --color-heading:          #4E3A2D;
  --color-heading-alt:      #684C39;
  --color-on-dark:          #FFFFFF;
  --color-link:             #469EA0;
  /* Teal escurecido para TEXTO sobre fundo claro (o #469EA0 dá 2.6:1 e reprova AA).
     O #469EA0 original continua em ícones, bordas e no gradiente do botão. */
  --color-link-accessible:  #2A6768;
  /* Teal clareado para texto sobre os fundos marrons */
  --color-link-on-dark:     #8FD4D6;
  /* Champanhe quente — destaques e filetes sobre marrom */
  --color-accent-warm:      #D9BE9C;
  /* Marca-texto champanhe sob palavras-chave dos títulos claros */
  --color-highlight:        rgba(217, 190, 156, .45);
  /* Spotlight teal que segue o cursor nos cards */
  --color-spotlight:        rgba(70, 158, 160, .07);
  /* Header translúcido no estado rolado */
  --color-brown-glass:      rgba(104, 76, 57, .88);
  --color-hairline-champagne: rgba(217, 190, 156, .22);
  /* Dourado queimado — estrelas de avaliação */
  --color-gold:             #B98E52;
  /* Texto escurecido para uso sobre o bege, que reduz o contraste */
  --color-text-on-beige:       #52493F;
  --color-text-muted-on-beige: #5C5348;

  /* --- Cores: bordas --- */
  --color-border-hairline:  #F0E8DF;
  --color-border-card:      #EBDADA;
  --color-border-card-warm: #C9C2AB;
  --color-border-warm:      #E4D9CB;
  --color-border-button:    #739FA0;
  --color-border-hover:     #469EA0;

  /* --- Gradientes --- */
  --gradient-cta:           linear-gradient(92deg, #469EA0 0%, #739FA0 100%);
  --gradient-cta-hover:     linear-gradient(92deg, #739FA0 0%, #469EA0 100%);
  --gradient-panel:         linear-gradient(180deg, #FFFFFF 0%, #FAF7F3 100%);
  --gradient-section-up:    linear-gradient(180deg, #FAF7F3 0%, #FFFFFF 100%);
  --gradient-hero:
    radial-gradient(1000px 540px at 86% -12%, rgba(126, 93, 68, .55), transparent 62%),
    radial-gradient(760px 460px at -10% 110%, rgba(28, 19, 13, .65), transparent 55%);

  /* Grain sutil (SVG turbulence) para os fundos marrons */
  --noise-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* --- Tipografia ---
     Fonte única da marca: Inter (decisão do Marco 13/08 — a Fraunces foi testada
     nos títulos e descartada; display = primary). */
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-primary);
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Escala fluida, reduzida ~12% a pedido do Marco (13/08) */
  --fs-display:    clamp(2.125rem, 1.5rem + 2.1vw, 2.875rem); /* 34 → 46 */
  --fs-h2:         clamp(1.625rem, 1.25rem + 1.3vw, 2.125rem);/* 26 → 34 */
  --fs-h3:         1.031rem;   /* 16.5 — títulos de card */
  --fs-statement:  clamp(1.5rem, 1.2rem + 1.6vw, 2.125rem);   /* frase do rodapé */
  --fs-lead:       1.031rem;   /* 16.5 */
  --fs-body:       0.969rem;   /* 15.5 */
  --fs-body-sm:    0.906rem;   /* 14.5 */
  --fs-caption:    0.844rem;   /* 13.5 */
  --fs-eyebrow:    0.656rem;   /* 10.5 */
  --fs-micro:      0.625rem;   /* 10 */
  --fs-button:     0.75rem;    /* 12 */
  --fs-menu:       0.75rem;    /* 12 */
  --fs-credits:    0.594rem;   /* 9.5 */

  --lh-display: 1.08;
  --lh-heading: 1.15;
  --lh-h3:      1.35;
  --lh-body:    1.7;
  --lh-lead:    1.62;
  --lh-button:  1;

  --ls-heading: -0.025em;
  --ls-eyebrow:  0.22em;
  --ls-button:   0.09em;
  --ls-caps-sm:  0.14em;

  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Mola sutil (overshoot 2–4%) p/ micro-movimentos; cai no --ease sem linear() */
  --ease-spring: cubic-bezier(.22, .61, .36, 1);

  /* --- Containers --- */
  --container-header:    1300px;
  --container-default:   1200px;
  --container-editorial: 1100px;
  --container-article:    800px;
  --gutter:                24px;

  /* --- Espaçamento --- */
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  26px;
  --space-8:  40px;
  --space-10: 52px;
  --space-12: 64px;
  --space-14: 76px;
  --space-16: 88px;
  --space-20: 104px;

  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);   /* 72 → 136 */
  --gap-columns: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* 40 → 80  */

  /* --- Formas --- */
  --radius-xs: 10px;
  --radius-sm: 13px;
  --radius-md: 18px;
  --radius-lg: 22px;

  /* --- Sombras (quentes, difusas — substituem as offset pesadas do original) --- */
  --shadow-cta:    0 18px 34px -14px rgba(38, 92, 94, .55), 0 4px 10px -4px rgba(38, 92, 94, .35);
  --shadow-cta-hover: 0 22px 40px -14px rgba(38, 92, 94, .6), 0 6px 12px -4px rgba(38, 92, 94, .4);
  --color-glow-warm: rgba(126, 93, 68, .5);
  --shadow-card:   0 22px 44px -26px rgba(46, 32, 22, .35);
  --shadow-panel:  0 30px 60px -34px rgba(20, 12, 8, .55);
  --shadow-header: 0 14px 34px -18px rgba(20, 12, 8, .55);
  --shadow-float:  0 14px 30px -10px rgba(38, 92, 94, .55);
  /* Sombra interna no topo das seções escuras — o plano claro "sobrepõe" */
  --shadow-plane:  inset 0 24px 32px -28px rgba(42, 30, 21, .55);

  /* --- Componentes --- */
  --header-height: 76px;
  --header-height-scrolled: 62px;
  --logo-width:   150px;
  --logo-height:   56px;
  --btn-padding: 20px 34px;

  /* --- Movimento --- */
  --transition-default: 0.3s var(--ease);
  --reveal-duration:    0.8s;

  /* --- Camadas --- */
  --z-base:      1;
  --z-sticky:  100;
  --z-header:  999;
  --z-float:  1000;
}

/* ===== TABLET — até 1024px ===== */
@media (max-width: 1024px) {
  :root {
    --header-height: 68px;
    --logo-width:   132px;
    --logo-height:   49px;
    --gutter:        20px;
  }
}

/* ===== MOBILE — até 767px ===== */
@media (max-width: 767px) {
  :root {
    --fs-h3:     0.969rem;  /* 15.5 */
    --fs-lead:   0.969rem;  /* 15.5 */
    --fs-body:   0.938rem;  /* 15 */
    --fs-eyebrow: 0.594rem; /* 9.5 */
    --gutter:     18px;
    --btn-padding: 17px 24px;
  }
}

/* Física de mola onde o navegador entende linear() */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, .35 33%, .78 55%, 1.02 72%, .99 85%, 1);
  }
}