/* Alpha Barbearia — tokens de design (estilo "barbearia raiz", no clima do logo).
 * Cores, fontes, espaços e movimento. Todo o CSS usa estes nomes.
 */
:root {
  color-scheme: dark;

  /* ── Cores (OKLCH) ── */
  --color-paper:      oklch(15% 0.006 75);   /* preto */
  --color-paper-2:    oklch(19% 0.008 75);   /* preto elevado (cards) */
  --color-paper-3:    oklch(24% 0.010 75);
  --color-rule:       oklch(32% 0.012 75);
  --color-muted:      oklch(70% 0.012 75);   /* texto de apoio no preto */
  --color-ink:        oklch(96% 0.010 85);   /* branco */
  --color-cream:      oklch(95% 0.018 85);   /* seção clara */
  --color-cream-2:    oklch(91% 0.024 85);
  --color-cream-ink:  oklch(18% 0.008 75);   /* texto na seção clara */
  --color-cream-muted: oklch(42% 0.012 75);
  --color-cream-rule: oklch(84% 0.025 85);
  --color-accent:     oklch(84% 0.165 78);   /* amarelo do logo */
  --color-accent-2:   oklch(76% 0.165 72);   /* amarelo mais quente (hover) */
  --color-accent-ink: oklch(16% 0.008 75);   /* texto sobre o amarelo */
  --color-whats:      oklch(70% 0.17 150);   /* verde WhatsApp (só no botão flutuante) */
  --color-focus:      oklch(88% 0.18 90);
  --color-error:      oklch(62% 0.19 28);

  /* ── Fontes ── */
  --font-display: "Alfa Slab One", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --font-body:    "Jost", "Futura", "Century Gothic", sans-serif;

  --text-label: 0.8125rem;
  --text-base:  1.0625rem;
  --text-lede:  clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  --text-lg:    clamp(1.5rem, 1vw + 1.15rem, 2rem);
  --text-title: clamp(2.25rem, 3.4vw + 1rem, 4.25rem);
  --text-hero:  clamp(2.75rem, 6vw + 1rem, 6.5rem);

  /* ── Espaço (4pt) ── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --gutter:   clamp(1rem, 4vw, 3.5rem);
  --page-max: 80rem;
  --nav-h:    4.75rem;

  /* ── Formas ── */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* ── Movimento ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    600ms;

  /* ── Camadas ── */
  --z-raised: 10;
  --z-sticky: 200;
  --z-float:  300;
  --z-modal:  400;
}