/* Protótipo 02 · Barbearia — tokens (elemento 1). Origem: design system "The Gentleman's Club" colado pelo usuário em 2026-10-19.
   Linhas marcadas "AJUSTE B#" divergem da referência: ver ../01-design-system.md §2. */
:root {
  /* Verde-acinzentado (fundos) */
  --color-primary: #354542;
  --color-primary-dark: #252B28;
  --color-primary-light: #485C57;       /* só superfície/gradiente; texto secundário e muted NÃO passam aqui (B4) */

  /* Cobre */
  --color-accent: #C28A4D;              /* botão e destaque. Como TEXTO: só ≥ 24 px ou sobre primary-dark (B2) */
  --color-accent-hover: #D29A5D;
  --color-accent-pressed: #B07B42;      /* AJUSTE B3: fundo do botão pressionado (texto #111513 = 5,05:1) */
  --color-accent-active: #A56F3A;       /* detalhe escuro/ícone sobre primary-dark — não texto, não fundo de botão (B3) */
  --color-accent-text: #E4B77F;         /* AJUSTE B2: cobre claro para TEXTO pequeno (5,47:1 sobre primary) */

  /* Neutros */
  --color-white: #F4F2EC;
  --color-text-primary: #F0EFE9;
  --color-text-secondary: #C4C9C4;      /* não usar sobre primary-light (4,25:1) (B4) */
  --color-text-muted: #AEB6B1;          /* AJUSTE B1: referência #939D97 media 3,61:1 sobre primary (B1) */
  --color-border: #687570;              /* divisórias (decorativo: 2,10:1) */
  --color-border-subtle: #4A5752;       /* separadores discretos (decorativo) */
  --color-border-input: #889590;        /* AJUSTE B5: campos e controles ≥ 3:1 (3,24:1 sobre primary) */
  --color-black: #111513;               /* texto sobre botão cobre (6,17:1) e fundos profundos */

  /* Estados (texto sobre primary / primary-dark; NÃO sobre primary-light — B6) */
  --color-focus: #E4B77F;
  --color-success: #92C4A4;             /* AJUSTE B6: referência #78A58A media 3,63:1 */
  --color-error: #F29E95;               /* AJUSTE B6: referência #D87970 media 3,31:1 */
  --color-warning: #E0B86E;
  --color-info: #91B5C2;

  /* Tipografia */
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-heading: "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-body: "Inter", system-ui, Arial, sans-serif;
  --font-price: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-button: "Oswald", "Arial Narrow", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-display: clamp(3rem, 13vw, 4.5rem);   /* mobile; sobe nos breakpoints abaixo */

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-display: 0.9; --leading-heading: 1.1; --leading-body: 1.5; --leading-ui: 1.4;
  --tracking-display: -0.045em; --tracking-heading: -0.02em; --tracking-label: 0.04em;

  /* Espaçamento (base 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: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px;

  /* Sombras */
  --shadow-image: 0 12px 36px rgb(0 0 0 / 18%);
  --shadow-panel: 0 8px 24px rgb(0 0 0 / 15%);
  --shadow-focus: 0 0 0 3px rgb(228 183 127 / 35%);   /* AJUSTE B7: 1,94:1 — só reforço, nunca único indicador */

  /* Degradê do hero (amostrado da referência: preto-oliva no topo → verde → verde-azulado à direita; fecha em primary para emendar com a seção seguinte) */
  --gradient-hero:
    radial-gradient(ellipse 55% 60% at 80% 58%, rgb(61 79 78) 0%, rgb(61 79 78 / 0) 70%),
    radial-gradient(ellipse 50% 55% at 42% 52%, rgb(60 70 63) 0%, rgb(60 70 63 / 0) 70%),
    radial-gradient(ellipse 60% 50% at 6% 96%, rgb(31 39 42) 0%, rgb(31 39 42 / 0) 70%),
    linear-gradient(180deg, #191a18 0%, #23251f 28%, #2e352f 55%, #324341 82%, #354542 100%);

  /* Layout (mobile first — AJUSTE B8) */
  --container-max: 1440px; --container-gutter: 20px; --section-space: 40px; --service-row-height: 60px; --grid-gap: 16px;

  /* Movimento */
  --transition-fast: 150ms ease; --transition-base: 220ms ease;
}
@media (min-width: 768px)  { :root { --text-display: clamp(5rem, 10vw, 7rem);  --container-gutter: 32px; --section-space: 56px; --service-row-height: 67px; --grid-gap: 20px; } }
@media (min-width: 1024px) { :root { --grid-gap: 24px; } }
@media (min-width: 1280px) { :root { --text-display: clamp(8rem, 12vw, 10rem); --container-gutter: 48px; --section-space: 80px; } }
@media (max-width: 359px)  { :root { --container-gutter: 16px; } }