/* Protótipo 04 · Doceria — tokens (elemento 1). Origem: design system "Satori (Pasteleria Artesanal)" colado pelo usuário em 2026-10-19.
   Linhas marcadas "AJUSTE D#" divergem da referência: ver ../01-design-system.md §2. */
:root {
  /* Paleta (referência) */
  --color-primary-red: #8B0000;
  --color-primary-crimson: #B22222;
  --color-secondary-cream: #FFF8F0;
  --color-secondary-rose: #FCE4E4;
  --color-neutral-dark: #1A1A1A;
  --color-neutral-light: #FFFFFF;
  --color-neutral-muted: #666666;       /* não usar sobre --color-state-hover-light (4,41:1) (D6) */
  --color-neutral-border: #E5D9D7;      /* divisórias e cartões (decorativo: 1,38:1) — NÃO limite de campo (D1) */
  --color-neutral-border-strong: #857370; /* AJUSTE D1: borda de campo/controle (4,48:1 branco · 4,26 creme · 3,71 rosa) */

  /* Estados */
  --color-state-hover-dark: #660000;    /* botão primário: hover (13,42:1 com branco) */
  --color-state-hover-light: #F5DCDA;
  --color-state-active: #4A0000;        /* botão primário: pressionado (16,26:1) */
  --color-state-success: #2E7D32;       /* ícone/borda; texto só sobre branco/creme (5,13/4,87) (D5) */
  --color-state-success-text: #1B5E20;  /* AJUSTE D5: texto de sucesso (≥ 6,05:1 em qualquer fundo claro) */
  --color-state-error: #D32F2F;         /* ícone/borda (4,98:1 sobre branco) (D4) */
  --color-state-error-text: #B71C1C;    /* AJUSTE D4: texto de erro (6,57 branco · 6,24 creme · 5,43 rosa · 5,05 hover-claro) */

  /* Foco (AJUSTE D3): anel duplo 2px + 2px; em seção vermelha o anel é CREME (crimson sobre vermelho = 1,5:1) */
  --color-focus: #B22222;               /* sobre claro: 6,68:1 branco / 6,34 creme */
  --color-focus-on-dark: #FFF8F0;       /* sobre vermelho/bordô: 9,50:1 */

  /* Tipografia — 2 famílias, auto-hospedadas (AJUSTE D7: sem Great Vibes; display = Playfair Display Itálico) */
  --font-family-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-family-sans: "Montserrat", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

  --font-size-h1: clamp(2.25rem, 6vw, 3rem);   /* 36 px celular → 48 px desktop */
  --font-size-h2: clamp(1.625rem, 3.6vw, 2rem);
  --font-size-h3: 1.75rem;
  --font-size-subhead: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-caption: 0.75rem;                /* mínimo de 12 px */

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

  --line-height-tight: 1.1;
  --line-height-heading: 1.25;
  --line-height-base: 1.5;
  --tracking-h1: -0.02em;
  --tracking-subhead: 0.05em;
  --tracking-caption: 0.1em;

  /* Espaçamento (grade de 8 px) */
  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem;

  /* Raios */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px;

  /* Sombras (sempre com bordô transparente, nunca preto pesado) */
  --shadow-subtle: 0 4px 12px rgba(139, 0, 0, 0.05);
  --shadow-card: 0 8px 24px rgba(26, 26, 26, 0.08);
  --shadow-floating: 0 16px 32px rgba(139, 0, 0, 0.15);

  /* Layout (mobile first, conforme a referência: 16 px → 24 px → 32 px) */
  --container-max: 1200px;
  --container-gutter: 16px;
  --grid-gap: 16px;
  --section-space: var(--space-2xl);
  --touch-min: 44px;

  /* Movimento */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}
@media (min-width: 768px)  { :root { --container-gutter: 24px; --grid-gap: 20px; --section-space: var(--space-3xl); } }
@media (min-width: 1024px) { :root { --container-gutter: 32px; --grid-gap: 24px; } }

/* Foco visível: anel duplo (2 px + 2 px). Sobre fundo claro: crimson com halo branco. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-neutral-light);
}
/* Em seções vermelhas (.fundo-vermelho): anel creme com halo bordô */
:where(.fundo-vermelho) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--color-focus-on-dark);
  box-shadow: 0 0 0 4px var(--color-primary-red);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}