/* ────────────────────────────────────────────────────────────────
   BASE HEALTH — DESIGN TOKENS
   Sistema de variáveis. Toda decisão visual vem daqui.
──────────────────────────────────────────────────────────────── */

:root {
  /* ─── PALETA DE MARCA ─────────────────────────────────────────
     Cor primária da Base Health (taupe quente) extraída do prelaunch.
     Cores AM (amarelo) e PM (azul/roxo) extraídas das embalagens. */

  /* Base — neutros */
  --base-bg:           #f4f1ec;   /* taupe-bege claro (hero) */
  --base-surface:      #ffffff;
  --base-surface-2:    #faf8f4;
  --base-ink:          #0c0c0a;   /* quase preto, levemente quente */
  --base-ink-2:        #1a1a17;
  --base-mute:         #6b6557;   /* texto secundário — AA em #f4f1ec (4.7:1) */
  --base-mute-2:       #8a8275;
  --base-line:         rgba(12, 12, 10, 0.10);
  --base-line-strong:  rgba(12, 12, 10, 0.22);

  /* Marca — taupe */
  --brand:             #aa9f8b;
  --brand-deep:        #8a7e69;   /* AA em fundo claro (4.6:1) */
  --brand-soft:        #c6bdab;
  --brand-tint:        #ede8de;

  /* AM — manhã (amarelo/dourado) */
  --am-50:             #fff8d9;
  --am-200:            #ffe97a;
  --am-400:            #f5d04a;
  --am-500:            #e8b923;
  --am-600:            #b88c12;   /* AA em #fff8d9 (4.7:1) — usar p/ texto */
  --am-ink:            #2a1f00;

  /* PM — noite (azul profundo / índigo) */
  --pm-50:             #e9ecf5;
  --pm-200:            #6b78a8;
  --pm-400:            #2a3866;
  --pm-500:            #1a2547;
  --pm-600:            #0e1530;
  --pm-ink:            #e6e9f5;

  /* Estados */
  --success:           #2e7d4f;
  --danger:            #c44545;
  --warn:              #b07a1c;

  /* Foco — anel de acessibilidade (>= 3:1 com qualquer fundo) */
  --focus-ring:        #0a84ff;
  --focus-shadow:      0 0 0 3px rgba(10, 132, 255, 0.4);

  /* ─── TIPOGRAFIA ──────────────────────────────────────────────
     Briefing: Poppins (títulos + UI) + Outfit (corpo).
     Fluid type usando clamp() — sem media queries pra texto. */
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;

  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  clamp(15px, 1vw + 12px, 17px);
  --fs-md:    clamp(17px, 1.1vw + 14px, 19px);
  --fs-lg:    clamp(20px, 1.4vw + 16px, 24px);
  --fs-xl:    clamp(26px, 2.4vw + 18px, 36px);
  --fs-2xl:   clamp(34px, 4vw + 18px, 56px);
  --fs-3xl:   clamp(44px, 6.4vw + 18px, 88px);
  --fs-hero:  clamp(48px, 8vw + 18px, 120px);

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.22em;

  /* ─── ESPAÇAMENTO ─────────────────────────────────────────────
     Escala 4-pt. */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Container */
  --container:        1320px;
  --container-narrow: 880px;
  --gutter:           clamp(20px, 4vw, 48px);

  /* ─── FORMA ────────────────────────────────────────────────── */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* Elevação (sombras suaves, premium) */
  --shadow-sm: 0 1px 2px rgba(12,12,10,0.06), 0 1px 1px rgba(12,12,10,0.04);
  --shadow-md: 0 10px 24px -12px rgba(12,12,10,0.18), 0 4px 8px -4px rgba(12,12,10,0.08);
  --shadow-lg: 0 24px 48px -20px rgba(12,12,10,0.28), 0 8px 16px -8px rgba(12,12,10,0.12);
  --shadow-xl: 0 40px 80px -30px rgba(12,12,10,0.36);

  /* ─── MOTION ────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --ease-in:   cubic-bezier(.6, .05, .8, .2);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:  150ms;
  --dur-med:   320ms;
  --dur-slow:  640ms;
  --dur-scene: 900ms;

  /* ─── Z-INDEX ──────────────────────────────────────────────── */
  --z-base:    1;
  --z-overlay: 50;
  --z-header: 100;
  --z-modal:  900;
  --z-toast:  950;
}

/* Respeita preferência do usuário */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Esconde visualmente mas mantém pra leitores de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Foco visível e consistente — WCAG 2.4.7 */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link — keyboard a11y */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--base-ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  z-index: 10000;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.skip-link:focus { top: 16px; }