/* Pet América — design tokens (única fonte de verdade; nenhum outro CSS declara cor, raio ou duração literal).

   Origem:
   - Nomes e escalas estruturais: _prototype/_ds/open-design-design-system-<id>/tokens/
     (colors: --bg, --text, --border, --shadow-xs..lg; typography: --font-size-N, --leading-N, --weight-N;
      spacing: --spacing-N; shape: --radius-N, --stroke-N; motion: --duration-N, --curve-N;
      materials: --material-N).
   - Valores de marca: SPEC.md §5.2 (verde clínica, vermelho loja, neutros quentes).
   - Motion em frames a 30fps e raio por profundidade: motion-e-anti-slop.md §3/§7
     (mesma escala de ~/dev/mobile-design-system/tokens/motion.json e radius.json).

   Desvios do DS (deliberados, ver README "Tokens"):
   1. --duration-* mantêm os NOMES do DS mas valem frames, não ms redondos.
   2. --ease-out aponta para a curva de entrada (0.16,1,0.30,1), não a decelerate-mid do DS.
   3. --radius-* do DS ficam (2/4/8/12/pill) e ganham a escala por profundidade 6/13/20/32/60.
   4. Neutros do DS (cinza frio) viram os neutros quentes da marca, com os MESMOS nomes semânticos. */

:root {
  /* ── Cor: paleta de marca (SPEC §5.2) ─────────────────────────────── */
  /* Verde = mundo clínica */
  --verde-50:  #E8F6F5;  --verde-100: #C9EBE8;  --verde-200: #97D8D2;
  --verde-500: #10A89E;  --verde-600: #0B948B;  /* marca: ícones, textos >= 24px */
  --verde-700: #087A73;  /* botão com texto branco (5,2:1) e links */
  --verde-800: #06615C;  --verde-900: #054B47;  /* fundos escuros: rodapé, faixas */

  /* Vermelho = mundo loja/farmácia */
  --vermelho-50:  #FCEBEF;  --vermelho-100: #F8D0DA;
  --vermelho-600: #D63359;  /* preços, badges, ícones */
  --vermelho-700: #B8264A;  /* botão "Comprar" / hover */
  --vermelho-800: #93203D;

  /* Neutros quentes */
  --n-0: #FFFFFF;  --n-25: #FCFBF8;  --n-50: #F6F4EF;
  --n-100: #ECE9E2;  --n-300: #CFCAC0;
  --n-500: #6B665E;  --n-700: #4A4741;  --n-900: #1F2328;

  /* Feedback (distintos do vermelho de marca) */
  --sucesso: #2E9D5B;  --alerta: #E8A33D;  --erro: #C8322F;  --info: #2F7FB5;
  --emergencia: #C8322F;   /* só botão/selo de Emergência 24h */
  --whatsapp: #25D366;     /* só o botão flutuante */
  --estrela: #F5B301;      /* avaliações */

  /* ── Cor: nomes semânticos do DS, valores da marca ────────────────── */
  --bg: var(--n-0);
  --bg-app: var(--n-25);       /* fundo padrão do site */
  --bg-panel: var(--n-50);     /* seções alternadas */
  --bg-subtle: var(--n-100);
  --bg-muted: var(--n-300);
  --bg-elevated: var(--n-0);
  --border: var(--n-100);
  --border-strong: var(--n-300);
  --border-soft: var(--n-50);
  --text: var(--n-700);        /* corpo, 8,9:1 */
  --text-strong: var(--n-900); /* títulos */
  --text-muted: var(--n-500);  /* secundário, 5,7:1 (nunca abaixo disso: não existe --text-soft claro) */
  --text-soft: var(--n-500);
  --scrim: rgb(31 35 40 / 0.48);
  /* sobre fundo escuro (rodapé, faixas verde-900) */
  --on-dark-hover: rgb(255 255 255 / 0.1);
  --on-dark-line: rgb(255 255 255 / 0.14);
  --on-dark-border: rgb(255 255 255 / 0.4);

  /* ── Mundo (troca por data-mundo; ver bloco abaixo) ────────────────── */
  --acento: var(--verde-700);
  --acento-forte: var(--verde-800);
  --acento-suave: var(--verde-50);
  --acento-marca: var(--verde-600);
  --acento-contraste: var(--n-0);
  --accent: var(--acento);                 /* alias do nome do DS */
  --accent-hover: var(--acento-forte);
  --accent-soft: var(--acento-suave);
  --accent-contrast: var(--acento-contraste);

  /* ── Tipografia ───────────────────────────────────────────────────── */
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--sans);
  --mono: "Paper Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* dado exato: telefone, CNPJ, CRMV, preço de tabela */

  /* Escala do DS + 72 (display). Salto real: 13 → 72 ≈ 5,5×. */
  --font-size-12: 12px;  --font-size-13: 13px;  --font-size-14: 14px;
  --font-size-16: 16px;  --font-size-18: 18px;  --font-size-20: 20px;
  --font-size-24: 24px;  --font-size-28: 28px;  --font-size-32: 32px;
  --font-size-36: 36px;  --font-size-48: 48px;  --font-size-52: 52px;
  --font-size-64: 64px;  --font-size-72: 72px;

  --text-caption: var(--font-size-13);
  --text-small: var(--font-size-14);
  --text-body: var(--font-size-16);
  --text-lead: var(--font-size-18);
  --text-title: var(--font-size-24);
  /* fluidos (piso mobile → teto desktop) */
  --text-display: clamp(var(--font-size-36), 0.5rem + 5.4vw, var(--font-size-72));
  --text-h1: clamp(var(--font-size-32), 1rem + 3.2vw, var(--font-size-52));
  --text-h2: clamp(var(--font-size-28), 1rem + 1.8vw, var(--font-size-36));
  --text-h3: clamp(var(--font-size-20), 0.9rem + 0.6vw, var(--font-size-24));

  --leading-tight: 1.04;
  --leading-heading: 1.15;
  --leading-ui: 125%;
  --leading-body: 1.6;
  --track-display: -0.035em;
  --track-heading: -0.02em;
  --track-eyebrow: 0.08em;
  --weight-read: 400;
  --weight-emphasize: 500;
  --weight-announce: 600;
  --weight-display: 700;

  /* ── Espaçamento (nomes do DS + os degraus de seção do SPEC) ───────── */
  --spacing-2: 2px;  --spacing-4: 4px;  --spacing-6: 6px;  --spacing-8: 8px;
  --spacing-10: 10px;  --spacing-12: 12px;  --spacing-16: 16px;  --spacing-18: 18px;
  --spacing-20: 20px;  --spacing-24: 24px;  --spacing-28: 28px;  --spacing-32: 32px;
  --spacing-36: 36px;  --spacing-42: 42px;  --spacing-48: 48px;  --spacing-52: 52px;
  --spacing-64: 64px;  --spacing-72: 72px;  --spacing-96: 96px;  --spacing-128: 128px;
  --section-y: clamp(var(--spacing-64), 4rem + 4vw, var(--spacing-128));

  --container: 1280px;
  --gutter: clamp(var(--spacing-16), 0.5rem + 2vw, var(--spacing-32));
  --header-h: 72px;
  --header-h-mobile: 60px;
  --control-height: 44px;      /* alvo de toque mínimo */
  --control-height-lg: 54px;   /* CTA de hero (Home v3) */

  /* ── Forma ────────────────────────────────────────────────────────── */
  /* DS (mantidos) */
  --radius-none: 0px;  --radius-small: 2px;  --radius-medium: 4px;
  --radius-large: 8px;  --radius-xlarge: 12px;  --radius-circular: 50%;
  --radius-pill: 999px;
  /* Por profundidade: barra flutuante 60 · painel 32 · card 20 · imagem 13 · controle 6 */
  --radius-floating: 60px;
  --radius-panel: 32px;
  --radius-card: 20px;
  --radius-image: 13px;
  --radius-control: 6px;
  --radius-full: 999px;
  --card-pad: var(--spacing-20);
  --radius-card-inner: calc(var(--radius-card) - var(--card-pad)); /* canto concêntrico: raio interno = externo − gap */
  --stroke-thin: 1px;  --stroke-medium: 1.5px;  --stroke-thick: 2px;
  --icon-inline: 1.25em;   /* ícone ao lado de texto: acompanha o corpo do botão */

  /* ── Elevação (só para o que flutua; card em repouso = borda) ──────── */
  --shadow-xs: 0 1px 0 rgb(31 35 40 / 0.04);
  --shadow-sm: 0 1px 2px rgb(31 35 40 / 0.06), 0 8px 24px rgb(31 35 40 / 0.08);
  --shadow-md: 0 6px 24px rgb(31 35 40 / 0.09), 0 2px 6px rgb(31 35 40 / 0.05);
  --shadow-lg: 0 24px 60px rgb(31 35 40 / 0.18), 0 8px 16px rgb(31 35 40 / 0.08);

  /* ── Materiais (só camadas funcionais: header, menus, barras) ──────── */
  --material-thick: rgb(252 251 248 / 0.9);
  --material-thick-blur: 24px;
  --material-thick-backdrop: blur(var(--material-thick-blur)) saturate(1.6);
  --material-separator: rgb(31 35 40 / 0.1);

  /* ── Motion: frames a 30fps (motion-e-anti-slop.md §3) ─────────────── */
  --frame: 33.3333ms;
  --dur-micro: calc(var(--frame) * 2);     /* 67ms  foco, toggle */
  --dur-stagger-item: calc(var(--frame) * 4);   /* 133ms */
  --dur-stagger-block: calc(var(--frame) * 6);  /* 200ms */
  --dur-state: calc(var(--frame) * 12);    /* 400ms hover, expansão */
  --dur-enter: calc(var(--frame) * 40);    /* 1333ms entrada de elemento */
  --dur-hero: calc(var(--frame) * 50);     /* 1667ms elemento principal, mais lento de propósito */
  --dur-reveal: calc(var(--frame) * 20);   /* 667ms entrada de seção/bloco ao rolar */
  --dur-loop: calc(var(--frame) * 60);     /* 2s pulso do "aberto agora" */
  /* nomes do DS, valores em frames */
  --duration-ultra-fast: var(--frame);
  --duration-faster: var(--dur-micro);
  --duration-fast: var(--dur-stagger-item);
  --duration-normal: var(--dur-stagger-block);
  --duration-gentle: calc(var(--frame) * 8);
  --duration-slow: calc(var(--frame) * 10);
  --duration-slower: var(--dur-state);
  --duration-ultra-slow: calc(var(--frame) * 16);
  --dur-quick: var(--dur-micro);
  --dur-exit: var(--dur-stagger-block);

  /* curvas: assinatura (revelação) · entrada · transformação no lugar */
  --ease-signature: cubic-bezier(0.52, 0, 0.48, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-transform: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: var(--ease-enter);
  --curve-linear: cubic-bezier(0, 0, 1, 1);
  --curve-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);

  /* ── Camadas ──────────────────────────────────────────────────────── */
  --z-header: 20;
  --z-float: 30;
  --z-menu: 35;      /* menu mobile aberto cobre o botão de WhatsApp */
  --z-cookie: 40;
  --z-skip: 50;
}

/* Troca de "mundo" (SPEC §5.2): data-mundo em <body> ou em qualquer seção.
   Verde e vermelho nunca competem no mesmo componente: cada componente lê só --acento. */
[data-mundo="clinica"] {
  --acento: var(--verde-700);  --acento-forte: var(--verde-800);
  --acento-suave: var(--verde-50);  --acento-marca: var(--verde-600);
}
[data-mundo="loja"] {
  --acento: var(--vermelho-700);  --acento-forte: var(--vermelho-800);
  --acento-suave: var(--vermelho-50);  --acento-marca: var(--vermelho-600);
}
[data-mundo="neutro"] {
  --acento: var(--verde-700);  --acento-forte: var(--verde-800);
  --acento-suave: var(--n-50);  --acento-marca: var(--verde-600);
}

@media (prefers-reduced-transparency: reduce) {
  :root { --material-thick: var(--n-25); --material-thick-backdrop: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --material-thick: var(--n-25); }
}

/* reduced-motion: todo tempo nasce de --frame, então zerar o frame zera o site inteiro de uma vez */
@media (prefers-reduced-motion: reduce) {
  :root { --frame: 0.01ms; }
}