/* ============================================================
   Cris Fontenele | Landing Page de campanha
   Design tokens. Todos os contrastes validados (WCAG AA).
   ============================================================ */

/* Reserva da Fraunces enquanto ela carrega: Georgia na mesma largura,
   para os títulos não mudarem de quebra de linha (CLS). */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); font-weight: 400; size-adjust: 93%; ascent-override: 105.2%; descent-override: 27.4%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-weight: 400; font-style: italic; size-adjust: 93%; ascent-override: 105.2%; descent-override: 27.4%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 700; size-adjust: 93%; ascent-override: 105.2%; descent-override: 27.4%; line-gap-override: 0%; }

:root {
  /* --- Cor: superfícies --- */
  --c-bg:            #FAF7F2;  /* fundo padrão, creme quente */
  --c-surface:       #FFFFFF;  /* cards elevados */
  --c-surface-alt:   #F0E9E0;  /* faixa bege, quebra de ritmo */
  --c-dark:          #23201B;  /* faixa escura, quebra de ritmo */

  /* --- Cor: texto --- */
  --c-ink:           #141310;  /* texto principal      17.38:1 no bg */
  --c-ink-2:         #56504A;  /* texto secundário      7.44:1 no bg */
  --c-ink-3:         #6E675F;  /* legenda, apoio        5.21:1 no bg */
  --c-on-dark:       #F5F0E8;  /* texto na faixa escura 14.31:1 */
  --c-on-dark-2:     #CFC6B8;  /* secundário no escuro   9.60:1 */

  /* --- Cor: acento --- */
  --c-accent:        #A8452A;  /* botões, links        5.54:1 no bg */
  --c-accent-hover:  #8C3721;
  --c-accent-soft:   #F7E9E2;  /* badge, destaque leve */
  --c-accent-dark:   #E8A98C;  /* acento sobre faixa escura  8.10:1 */
  --c-on-accent:     #FFFFFF;  /* texto no botão       5.92:1 */

  /* --- Cor: linhas --- */
  --c-line:          #E0D5C8;
  --c-line-strong:   #C9BCA9;
  --c-focus:         #A8452A;

  /* --- Tipografia --- */
  --f-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --f-body:    "Figtree", system-ui, -apple-system, sans-serif;

  --fs-overline: 0.6875rem;  /* 11px */
  --fs-caption:  0.8125rem;  /* 13px */
  --fs-body-sm:  0.9375rem;  /* 15px */
  --fs-body:     1.0625rem;  /* 17px  <- corpo no mobile */
  --fs-body-lg:  1.1875rem;  /* 19px */
  --fs-h3:       1.375rem;   /* 22px */
  --fs-h2:       1.75rem;    /* 28px */
  --fs-h1:       2.0625rem;  /* 33px */

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  --ls-overline: 0.16em;
  --ls-display: -0.012em;

  /* --- Espaçamento (escala de 4) --- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3.5rem;
  --s-9:  5rem;

  --gutter: 1.5rem;          /* respiro lateral no mobile */
  --maxw-text: 34rem;        /* ~62 caracteres por linha */
  --maxw-page: 72rem;

  /* --- Forma --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(20,19,16,0.04), 0 8px 24px rgba(20,19,16,0.06);
  --shadow-sticky: 0 -2px 16px rgba(20,19,16,0.10);

  /* --- Alvo de toque --- */
  --tap-min: 48px;
}

@media (min-width: 768px) {
  :root {
    --fs-body:    1.0625rem;
    --fs-body-lg: 1.25rem;
    --fs-h3:      1.5rem;
    --fs-h2:       2.25rem;
    --fs-h1:       3.25rem;
    --gutter:      4rem;
  }
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

p { margin: 0 0 var(--s-4); max-width: var(--maxw-text); text-wrap: pretty; }

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-hover); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

img, video { max-width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}