/* ============================================================
   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") ---------- */
  --color-surface-base: #E1DFD2;      /* Off-white — fundo base da página ("mesa") */
  --color-surface-card: #F2F1EC;      /* Branco-gelo — card elevado */
  --color-surface-shelf: #6E7E8E;     /* Azul-ardósia — seção alternada ("prateleira") */
  --color-surface-inverse: #2F3E53;   /* Azul-marinho — inversão de tema (CTA final) */

  /* ---------- COR — acento e decorativas ---------- */
  --color-accent: #F0A993;            /* Coral — acento quente, uso escasso */
  --color-accent-cta-alt: #855D51;    /* Coral escurecido ~45% — CTA secundária, 5.73:1 */
  --color-decor-sage: #98AA9E;        /* Verde-sálvia — só ilustração/pattern */
  --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;
  }
}