/* Protótipo 05 · Studio de yoga — tokens (elemento 1). Origem: design system "Yoga Studio" colado pelo usuário em 2026-10-22.
   Linhas marcadas "AJUSTE D#" divergem da referência: ver ../01-design-system.md §2. */
:root {
  color-scheme: dark;

  /* Cores (referência) */
  --color-primary: #D94CE8;
  --color-primary-light: #F0B5F4;
  --color-primary-dark: #8E168F;            /* só decorativo (gradiente/brilho): como texto = 2,58:1 (D3) */
  --color-secondary: #A58AAE;               /* fundo fotográfico lilás: NUNCA com texto claro (2,79:1); com texto escuro 6,64:1 (D6) */
  --color-secondary-dark: #514354;
  --color-bg: #050505;
  --color-surface: #171417;
  --color-surface-light: #29242B;
  --color-text: #F7F3F7;
  --color-text-muted: #BDB5C0;
  --color-border: #514653;                  /* divisórias e cartões (decorativo: 2,28:1) — NÃO limite de campo (D1) */
  --color-border-strong: #857788;           /* AJUSTE D1: borda de campo/controle (4,84 bg · 4,34 surface · 3,61 surface-light) */
  --color-success: #67D6A0;
  --color-error: #FF727D;                   /* não usar sobre secondary-dark (3,49:1) */
  --color-warning: #FFD17C;

  /* Foco (AJUSTE D4): lilás claro em fundo escuro; branco com halo escuro sobre foto/lilás/botão */
  --color-focus: #F0B5F4;                   /* 12,25 bg · 10,99 surface · 9,14 surface-light */
  --color-focus-photo: #FFFFFF;             /* anel branco + halo #050505: vale sobre qualquer fundo (D4) */
  --color-text-on-primary: #160D18;         /* texto dos botões magenta */

  /* Gradientes */
  --gradient-primary: linear-gradient(100deg, #8E168F 0%, #D94CE8 55%, #F0B5F4 100%);   /* DECORATIVO: filetes, anéis, brilho — nunca sob texto (D2) */
  --gradient-button: linear-gradient(100deg, #CC44DA 0%, #D94CE8 50%, #F0B5F4 100%);    /* AJUSTE D2: texto #160D18 ≥ 4,89:1 em todo o trajeto */
  --button-active: #C93FD6;                 /* AJUSTE D2: pressionado = magenta mais escuro, texto escuro 4,68:1 */
  --gradient-hero: linear-gradient(180deg, rgb(5 5 5 / .05) 0%, rgb(5 5 5 / .9) 100%);
  --overlay-card: linear-gradient(180deg, rgb(5 5 5 / .05) 20%, rgb(5 5 5 / .66) 50%, rgb(5 5 5 / .9) 100%); /* AJUSTE D5: reforçado (a referência só chegava a .82 no fim); medido no layout real: todo texto dos cartões ≥ 5,77:1 sobre as 4 fotos */

  /* Tipografia — 3 famílias, auto-hospedadas (variáveis, subset latino) */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-heading: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

  --text-xs: 0.75rem;                       /* 12 px: mínimo (a referência previa 10 px) (D8) */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --hero-titulo: clamp(6rem, 20vw, 15rem);      /* palavra monumental "YOGA" (4 letras), como na referência */
  --hero-titulo-m: clamp(3.5rem, 19vw, 7rem);   /* celular (< 600 px), como na referência */

  --line-tight: 1.1;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* 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; --space-20: 5rem;

  /* Raios */
  --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-card: 1rem; --radius-pill: 999px;

  /* Bordas e sombras */
  --border-subtle: 1px solid rgb(255 255 255 / .12);
  --shadow-card: 0 8px 24px rgb(0 0 0 / .35);
  --shadow-neon: 0 0 18px rgb(217 76 232 / .48);          /* decorativo: só botão, título e ilustração (D7) */
  --shadow-neon-strong: 0 0 32px rgb(217 76 232 / .32);

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

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

/* Foco visível (AJUSTE D4). Padrão (fundo escuro): anel lilás claro com folga. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
/* Sobre foto, cartão lilás ou botão magenta (.foco-foto): anel branco + halo escuro, legível em qualquer fundo. */
:where(.foco-foto) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
:where(a, button, input, select, textarea, summary, [tabindex]).foco-foto:focus-visible {
  outline: 2px solid var(--color-focus-photo);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-bg);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}