/* ============================================================
   Design Tokens — Site Dr. William Andrade
   Gerado pela Fase 4 (@design-system-architect) — wf-site-from-zero
   Fonte: Brandbook/05-BRANDBOOK-COMPLETO.md + 04-SITE/03-UI-DESIGN-DIRECTION.md
   Stack: HTML/CSS/JS estático (mesma base técnica do site Viva Pediatria)
   ============================================================ */

:root {
  /* ---------- COR — texto/CTA padrão (já existia na paleta, formalizada aqui) ---------- */
  --color-text: #2F3E53;           /* Azul-marinho — 10.84:1 vs branco (AAA) */
  --color-text-inverse: #F2F1EC;   /* Branco-gelo — texto sobre fundo escuro */

  /* ---------- COR — superfícies ("mesa" / "prateleira" / "card") ----------
     [24/jul/2026 — feedback direto do Dr. William] REMOVIDO o bege das superfícies
     do site (era o "clarinho" que ele não queria). Fundos claros agora usam branco-frio
     azulado, pra puxar o site pro azul+laranja. Regra vale só p/ site/LP — social media
     mantém a paleta completa (bege incluso). Ver MEMORIA/preferencias.md. */
  --color-surface-base: #E6EEF4;      /* Branco-frio azulado — fundo base da página ("mesa") */
  --color-surface-card: #FFFFFF;      /* Branco puro — card elevado (era branco-gelo bege) */
  --color-surface-shelf: #6E7E8E;     /* Azul-ardósia — seção alternada ("prateleira"). SÓ SUPERFÍCIE. */

  /* [31/jul/2026 — Fase 10, QA gate] O azul-ardósia estava sendo usado como cor de
     TEXTO em 38 lugares (legendas, leads, rodapé, cards de blog). Como texto ele
     REPROVA em WCAG AA: 4,17:1 sobre card branco e 3,55:1 sobre o fundo base — e
     texto pequeno exige 4,5:1. Este token é a versão text-safe da mesma família:
     5,63:1 sobre branco e 4,80:1 sobre o fundo base. Regra: ardósia = superfície,
     este = texto. Mesma lógica já aplicada ao laranja em 24/jul (accent x accent-strong). */
  --color-text-muted: #5A6979;        /* Azul-ardósia escurecido — texto secundário AA */

  /* [31/jul/2026 — Fase 10, QA gate] A faixa azul usava o ardósia puro (#6E7E8E) como
     fundo com texto branco-gelo: 3,69:1 sólido e 3,14:1 com alfa .85 — REPROVA em AA.
     Este tom escurecido dá 5,70:1 sólido e 4,64:1 com alfa .85, então a faixa passa
     mesmo mantendo a hierarquia de opacidade do texto. O ardósia puro segue intocado
     na paleta — é a cor da marca, só não serve de fundo pra texto pequeno claro. */
  --color-surface-shelf-deep: #52606E; /* Ardósia escura — fundo de seção com texto claro */
  --color-surface-inverse: #2F3E53;   /* Azul-marinho — inversão de tema (CTA final) */

  /* ---------- COR — acento e decorativas ---------- */
  --color-accent: #F5A97D;            /* Laranja-claro — acento quente text-safe (navy 5.6:1 AA) */
  --color-accent-strong: #E07E58;     /* Laranja forte — SÓ linhas/decor/gráfico, nunca atrás de texto pequeno (3.77:1 = regra 3:1 de UI) */
  --color-accent-cta-alt: #855D51;    /* Coral escurecido ~45% — CTA secundária, 5.73:1 */
  --color-decor-sage: #98AA9E;        /* Verde-sálvia — só logo/pattern (apoio raríssimo) */
  --color-decor-light-blue: #A6C2D1;  /* Azul-claro — só ilustração/pattern */

  /* ---------- COR — semânticas (contraste AA verificado) ---------- */
  --color-success: #545E57;   /* 6.74:1 vs branco */
  --color-error: #855D51;     /* 5.73:1 vs branco */
  --color-warning: #6E7E8E;   /* 4.17:1 — só texto grande/ícone, nunca texto pequeno */
  --color-info: #2F3E53;      /* 10.84:1 vs branco */

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: 'Quicksand', sans-serif;  /* marca, headlines */
  --font-text: 'Inter', sans-serif;         /* corpo, UI */

  --text-h1: clamp(2rem, 1.6rem + 2vw, 2.5rem);       /* 32px → 40px */
  --text-h2: clamp(1.5rem, 1.35rem + .75vw, 1.75rem); /* 24px → 28px */
  --text-h3: 1.25rem;                                  /* 20px */
  --text-body: 1rem;                                   /* 16px */
  --text-label: 0.8125rem;                             /* 13px */

  --leading-tight: 1.2;    /* headlines */
  --leading-base: 1.6;     /* corpo */
  --leading-label: 1.4;    /* legendas */

  /* ---------- ESPAÇAMENTO (base 8px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---------- RADIUS (travado — Shape Consistency Lock) ---------- */
  --radius-card: 16px;
  --radius-button: 10px;
  --radius-input: 8px;
  --radius-badge: 999px; /* círculo/pill — só para badges de ícone */

  /* ---------- SOMBRA (3 camadas, tingida em Azul-marinho — nunca preto puro) ---------- */
  --shadow-card:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 2px rgba(47,62,83,.08),
    0 8px 16px rgba(47,62,83,.12);

  --shadow-card-hover:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 4px rgba(47,62,83,.10),
    0 16px 28px rgba(47,62,83,.16);

  --shadow-button-pressed:
    inset 0 2px 4px rgba(47,62,83,.25);

  --shadow-photo-frame:
    0 1px 3px rgba(47,62,83,.10),
    0 12px 24px rgba(47,62,83,.18);

  /* ---------- MOTION (MOTION_INTENSITY: 4 — tátil, sem coreografia) ---------- */
  --ease-tactile: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;

  /* ---------- BREAKPOINTS (referência — usados em @media) ---------- */
  --bp-mobile: 599px;
  --bp-tablet: 1023px;
  --bp-desktop: 1024px;
}

/* Respeita prefers-reduced-motion — desliga elevação/transição decorativa */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}