/* Protótipo 06 · Pet store — tokens (elemento 1). Origem: design system "Pet Store Premium" colado pelo usuário em 2026-10-23.
   Linhas marcadas "AJUSTE D#" divergem da referência: ver ../01-design-system.md §2. */
:root {
  /* Cores principais (referência) */
  --color-primary: #E8B94F;                 /* fundo de botão e destaques; NUNCA como texto (1,46–1,89:1 sobre claros) (D1) */
  --color-primary-hover: #D5A33B;           /* hover do botão dourado (texto escuro 6,18:1) */
  --color-primary-active: #C48F2F;          /* AJUSTE D6: pressionado (texto escuro 4,95:1); a referência não definia */
  --color-primary-light: #F7D982;           /* selos promocionais e realces (texto escuro 10,29:1) */
  --color-secondary: #71945A;               /* só decorativo: ícones e detalhes (3,29:1 sobre surface); NUNCA fundo de texto branco (3,45:1) (D2) */
  --color-secondary-dark: #476A3B;          /* AJUSTE D2: fundo do botão secundário e do selo "Novo" (branco 6,19:1) */
  --color-secondary-hover: #3A5A30;         /* AJUSTE D2: hover do botão secundário (branco 7,82:1) */
  --color-accent: #D58B45;                  /* destaques e "estoque baixo" com texto escuro (5,15:1); nunca como texto (2,2–2,6:1) (D1) */

  /* Neutros */
  --color-background: #F7F0DE;
  --color-surface: #FFF9EC;
  --color-surface-warm: #F2E5C7;
  --color-text: #302A20;                    /* 11,37–13,54:1 sobre as superfícies */
  --color-text-muted: #675D4C;              /* AJUSTE D3: era #756B5A (4,19:1 sobre surface-warm ✗); agora 5,18:1 · só sobre claros, nunca sobre dourado/âmbar */
  --color-border: #E4D8BD;                  /* divisórias e cartões (decorativo: 1,24–1,41:1) — NÃO limite de campo (D4) */
  --color-border-strong: #857A64;           /* AJUSTE D4: borda de campo/controle (4,23 branco · 4,03 surface · 3,72 bg · 3,39 warm) */
  --color-white: #FFFFFF;

  /* Estados: cores originais para ícone, borda e fundo; versões -text para TEXTO (AJUSTE D5) */
  --color-success: #3F7A45;
  --color-success-text: #35693B;            /* 5,20:1 sobre surface-warm */
  --color-error: #B93D32;
  --color-error-text: #A5352B;              /* 5,35:1 sobre surface-warm (o original dá 4,45 ✗) */
  --color-warning: #A96816;
  --color-warning-text: #8F5710;            /* 4,75:1 sobre surface-warm (o original dá 3,59 ✗) */
  --color-info: #416C96;
  --color-info-text: #38608A;               /* 5,24:1 sobre surface-warm (o original dá 4,41 ✗) */
  --color-selected: #E8B94F;                /* selecionado = dourado + texto escuro + ✓ + borda escura de 2 px (D7) */

  /* Tipografia — 2 famílias, auto-hospedadas (variáveis, subset latino) */
  --font-heading: "Nunito Sans", "Nunito", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

  --font-size-xs: 0.75rem;                  /* 12 px: mínimo (a referência previa 10 px) (D8) */
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-hero: clamp(2.125rem, 5vw, 4rem);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --tracking-titulo: -0.025em;
  --tracking-label: 0.03em;

  /* Espaçamento: múltiplos de 4 px */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;

  /* Bordas */
  --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-pill: 999px;

  /* Sombras (marrom translúcido, nunca preto) */
  --shadow-card: 0 3px 12px rgb(67 52 25 / 8%);
  --shadow-hover: 0 8px 24px rgb(67 52 25 / 14%);
  --shadow-header: 0 2px 12px rgb(67 52 25 / 6%);

  /* Layout (mobile first: 16 → 24 → 32 px) */
  --container-max: 1200px;
  --page-gutter: 16px;
  --grid-gap: 16px;                         /* AJUSTE D9: faltava na referência (gap 12–20 px) */
  --section-space: 2.5rem;
  --touch-min: 44px;

  /* Movimento */
  --transition-fast: 160ms ease;
  --transition-normal: 240ms ease;
}
@media (min-width: 600px) { :root { --page-gutter: 24px; --section-space: 3rem; } }
@media (min-width: 900px) { :root { --page-gutter: 32px; --grid-gap: 20px; --section-space: 4rem; } }

/* Foco visível (AJUSTE D10): anel sólido de 3 px em azul-informação, com folga; vale sobre bg, surface e warm (4,41–5,25:1).
   Sobre dourado ou verde escuro o anel fica FORA do botão (offset), sobre o fundo da página. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-info);
  outline-offset: 3px;
}
/* Campos: borda sólida + contorno (a referência usava um anel de 35 % de opacidade: ~1,6:1 ✗) */
:where(input, select, textarea):focus-visible { border-color: var(--color-info); outline-width: 2px; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}