/* ==========================================================================
   Brilha Dentes — Design Tokens
   Base: variáveis do Figma (arquivo ICfRRJNDQ917u1IlcLaDrK), convertidas
   para tema escuro. Não escreva valores crus nas outras folhas: use estas
   variáveis.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Cor: tema escuro (tokens por papel) ------------------------------
     Derivada da paleta clara do Figma. Neutros puxam para o marrom (matiz
     ~30°) para acompanhar o dourado champanhe. Contraste medido sobre
     fundo / superfície / superfície elevada (WCAG, texto normal ≥ 4.5).
     ------------------------------------------------------------------------ */
  --c-bg:             #0e0d0c;  /* fundo da página              (era White)   */
  --c-surface:        #171513;  /* hero, cards, galeria          (era Marmore) */
  --c-surface-raised: #211e1b;  /* campos, letreiro, legendas    (era Line)    */

  --c-text-strong:    #f4efe9;  /* títulos, texto forte   17 / 15.9 / 14.5 (era Title)   */
  --c-text:           #d6cfc7;  /* texto corrido          12.6 / 11.8 / 10.8 (era Body)  */
  --c-text-muted:     #a59d94;  /* tags, notas            7.3 / 6.8 / 6.2 (era grey-37)  */
  --c-text-subtle:    #938b83;  /* recolhidos, placeholder 5.8 / 5.4 / 5.0 (era grey-55) */

  --c-border:         #f4efe933;/* texto forte a 20%                          */
  --c-border-soft:    #f4efe91a;/* texto forte a 10% — divisores (ornamento, linhas) e campos */
  --c-fill-soft:      #f4efe926;/* texto forte a 15% — botão discreto sobre card   */
  --c-fill-soft-up:   #f4efe93d;/* o mesmo a 24% — hover desse botão               */

  /* Botão principal e skip link: bloco claro com texto escuro */
  --c-inverse:        #f4efe9;
  --c-on-inverse:     #0e0d0c;

  --c-success:        #5db88a;  /* status "Atendendo agora"  8.0 (o verde do Figma dava 2.85) */
  --c-error:          #f2b8b5;  /* M3 error, versão escura   11.4             */

  /* --- Dourado: sempre em gradiente ------------------------------------
     #A07F60 → #C5A27E passa AA nas três superfícies (5.3 → 8.2 no fundo).
     A cor sólida existe só para o contorno de foco (outline não aceita
     gradiente) e para o fallback dos gradientes em SVG.
     ------------------------------------------------------------------------ */
  --gold-from:       #a07f60;
  --gold-to:         #c5a27e;
  --gold-light:      #e2cbaa;
  --g-gold:          linear-gradient(135deg, var(--gold-from), var(--gold-to));
  --g-gold-bright:   linear-gradient(135deg, var(--gold-to), var(--gold-light)); /* brilho / estado ativo */
  --c-gold:          #b3916f;   /* meio do gradiente — só :focus-visible      */
  --c-selection:     #b3916f59; /* seleção de texto (dourado a 35%)            */

  /* --- Vidro (derivado da paleta) — nav ao rolar e menu mobile ---------- */
  --glass-bg:        color-mix(in srgb, var(--c-bg) 55%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--c-bg) 80%, transparent); /* painel do menu: links legíveis */
  --glass-border:    color-mix(in srgb, var(--c-text-strong) 10%, transparent);
  --glass-highlight: color-mix(in srgb, var(--c-text-strong) 8%, transparent);
  --glass-fallback:  color-mix(in srgb, var(--c-surface) 96%, transparent);
  --glass-blur:      blur(20px) saturate(1.4);
  --glass-shadow:    0 12px 32px -16px #000000b3;

  /* --- Tipografia: famílias --------------------------------------------- */
  --f-display:  'Ovo', Georgia, 'Times New Roman', serif;       /* display, h1–h3 */
  --f-accent:   'EB Garamond', Georgia, serif;   /* estilo "alt": itálico dourado */
  --f-sans:     'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; /* h4, body, button, tag */

  /* --- Tipografia: estilos do Figma (font-size / line-height) ------------
     Desktop (≥1440) → Mobile (≤768). Entre os dois, os valores interpolam
     com clamp(): calc(mobile + (desktop − mobile) × (100vw − 768px) / 672px).
     ------------------------------------------------------------------------ */
  --t-display-size: clamp(72px, calc(12.5vw - 24px), 156px);    /* 156 → 72 */
  --t-display-lh:   clamp(76px, calc(11.905vw - 15.43px), 156px); /* 156 → 76 */
  --t-display-ls:   -0.01em;

  --t-h1-size: clamp(56px, calc(2.381vw + 37.71px), 72px);  /* 72 → 56 */
  --t-h1-lh:   clamp(60px, calc(2.381vw + 41.71px), 76px);  /* 76 → 60 */
  --t-h1-ls:   -0.01em;

  --t-h2-size: clamp(40px, calc(2.381vw + 21.71px), 56px);  /* 56 → 40 */
  --t-h2-lh:   clamp(44px, calc(2.381vw + 25.71px), 60px);  /* 60 → 44 */

  --t-h3-size: clamp(32px, calc(1.19vw + 22.86px), 40px);   /* 40 → 32 */
  --t-h3-lh:   clamp(36px, calc(1.19vw + 26.86px), 44px);   /* 44 → 36 */

  --t-h4-size: clamp(24px, calc(0.595vw + 19.43px), 28px);  /* 28 → 24 */
  --t-h4-lh:   clamp(30px, calc(0.298vw + 27.71px), 32px);  /* 32 → 30 */

  /* Iguais no desktop e no mobile.
     O Figma traz body mobile 18/18; usamos 18/27 para os parágrafos respirarem. */
  --t-body-size:      18px;  --t-body-lh:      27px;
  --t-body-sm-size:   14px;  --t-body-sm-lh:   21px;
  --t-small-size:     12px;  --t-small-lh:     20px;
  --t-button-size:    18px;  --t-button-lh:    28px;
  --t-button-sm-size: 14px;  --t-button-sm-lh: 20px;
  --t-tag-size:       14px;  --t-tag-lh:       21px;  --t-tag-ls: 1.5px;  /* uppercase */

  /* --- Peso ------------------------------------------------------------- */
  --w-regular: 400;
  --w-medium:  500;

  /* --- Raio ------------------------------------------------------------- */
  --r-pill:  999px;
  --r-lg:    64px;
  --r-md:    34px;
  --r-card:  24px;
  --r-sm:    16px;
  --r-xs:    12px;

  /* --- Espaçamento (item spacing do Figma) ------------------------------ */
  --s-8:   8px;
  --s-9:   9px;
  --s-11:  11px;
  --s-12:  12px;
  --s-14:  14px;
  --s-20:  20px;
  --s-16:  16px;
  --s-24:  24px;
  --s-32:  32px;   /* item spacing/m */
  --s-44:  44px;
  --s-64:  64px;
  --s-120: 120px;  /* respiro vertical entre seções (medido)          */
  --title-gap: 28px; /* título de seção (estilo h1) → conteúdo abaixo   */

  /* --- Grid (layout guide "Grid 16" do Figma: frame 1664, stretch) ------
     Margem fluida: 120px em 1664 e 16px no celular, sem saltos entre telas.
     Acima de 1664 o conteúdo trava em --grid-max e centraliza.
     ------------------------------------------------------------------------ */
  --grid-cols:   16;
  --grid-gutter: 32px;
  --grid-margin: clamp(16px, calc(10.3586vw - 52.367px), 120px);
  --grid-max:    1424px;   /* 16 × 59 + 15 × 32 */

  --inset:  8px;     /* recuo do card do hero e da nav em relação à tela */
  --nav-h:  72px;    /* conteúdo da nav                                     */
  --nav-pad: 16px;   /* respiro acima/abaixo → barra ao rolar = 104px       */
  --stroke: 1px;

  /* --- Elevação (M3/Elevation 3, escurecida para o fundo escuro) -------- */
  --shadow-3: 0 1px 3px 0 #00000099, 0 4px 8px 3px #00000066;

  /* --- Movimento -------------------------------------------------------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   180ms;
  --dur:        320ms;
  --dur-slow:   600ms;

  /* Animações de entrada (css/animations.css + js/core.js) */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1); /* expo-out: começa rápido, pousa suave */
  --dur-reveal:      900ms;
  --reveal-distance: 28px;
  --stagger:         90ms;  /* atraso entre itens em sequência             */
}

/* Tablet: 8 colunas */
@media (max-width: 1200px) {
  :root {
    --grid-cols: 8;
    --grid-gutter: 24px;
    --s-120: 96px;
  }
}

/* Celular: 4 colunas */
@media (max-width: 768px) {
  :root {
    --grid-cols: 4;
    --grid-gutter: 16px;
    --s-120: 72px;
    --dur-reveal: 750ms;
    --reveal-distance: 20px;
    --stagger: 70ms;
    --r-lg: 32px;
    --r-md: 24px;
    --r-card: 20px;
  }
}