/* ============================================================
   YOU SALON & BARBER — DESIGN TOKENS
   Mesma arquitetura de tokens do Design System Svim (svim-theme.css),
   re-temada para a identidade própria da You: fundo escuro predominante
   + amarelo vibrante (extraído de Marca-You-Salon-Barber-Amarela.png,
   #EEE638) sobre preto quase puro (#1C1B1D, extraído de
   Marca-You-Masculino.png). Símbolo: wordmark geométrico "YOU".
   Os componentes (.lk-*, .ty-*, #lm-root) são os MESMOS arquivos de
   Svim (svim-links.css / lead-form.css), sem nenhuma alteração de
   código: só estas variáveis mudam a marca inteira.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

:root {
  /* ── Marca (constantes oficiais) ── */
  --svim-gold:        #EEE638; /* amarelo oficial You (logo) */
  --svim-gold-light:  #F5EF7E; /* amarelo claro, texto/eyebrow sobre cards escuros */
  --svim-gold-deep:   #E4C400; /* amarelo mais rico, legível como destaque sobre fundo escuro */
  --svim-gold-soft:   #3A3714; /* tint escuro do amarelo, fundos de badge/chip */
  --svim-black:       #F5F3EC; /* "tinta" de alto contraste nesta base escura: quase-branco */
  --svim-ink:         #26242B; /* tom escuro elevado (cards, ícones, overlays) */
  --svim-white:       #ffffff;

  --grad-gold:    linear-gradient(135deg, var(--svim-gold-light) 0%, var(--svim-gold) 100%);
  --grad-gold-h:  linear-gradient(90deg, var(--svim-gold-light) 0%, var(--svim-gold) 100%);
  --grad-ink:     linear-gradient(135deg, #201f24 0%, #131217 100%);
  --grad-glow-gold: radial-gradient(ellipse, rgba(238,230,56,0.30) 0%, transparent 70%);
  --grad-glow-ink:  radial-gradient(ellipse, rgba(0,0,0,0.30) 0%, transparent 70%);

  /* ── Superfícies (tema escuro, único — identidade You é dark-first) ── */
  --bg-base:      #131217;
  --bg-surface:   #1A1920;
  --bg-elevated:  #201F26;
  --bg-card:      #1E1D24;
  --bg-highlight: #2A2831;
  --bg-dark:      #0B0A0D;
  --bg-overlay:   rgba(19,18,23,0.92);

  --text-primary:   var(--svim-black);
  --text-secondary: #B9B7AF;
  --text-muted:     #83817B;
  --text-inverse:   #131217;
  --text-disabled:  #55534E;

  --border-subtle:  rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.22);
  --border-focus:   var(--svim-gold);

  --color-primary:   var(--svim-gold);
  --color-secondary: var(--svim-gold-deep);
  --color-accent:    var(--svim-gold);
  --color-success:   #5fbf82;
  --color-warning:   #e0a83a;
  --color-error:     #e2645a;
  --color-info:      #6f9bd6;

  --glow-primary: 0 0 30px rgba(238,230,56,0.30), 0 0 80px rgba(238,230,56,0.12);
  --glow-soft:    0 0 60px rgba(238,230,56,0.16);
  --shadow-card:     0 4px 24px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.25);
  --shadow-elevated: 0 20px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);

  --hero-gradient: linear-gradient(165deg, #0E0D11 0%, #16151A 45%, #211D0E 100%);
  --hero-glow-1:   radial-gradient(ellipse, rgba(238,230,56,0.24) 0%, transparent 70%);
  --hero-glow-2:   radial-gradient(ellipse, rgba(238,230,56,0.10) 0%, transparent 70%);
  --mouse-glow:    radial-gradient(ellipse, rgba(238,230,56,0.14) 0%, transparent 70%);
  --mesh-1:        radial-gradient(circle at 12% 25%, rgba(238,230,56,0.12) 0%, transparent 45%);
  --mesh-2:        radial-gradient(circle at 88% 75%, rgba(255,255,255,0.05) 0%, transparent 45%);

  --bg-grid-size: 64px 64px;
  --bg-grid-lines:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  --bg-grid-lines-dark:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  --bg-dots-dark: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);

  --chip-bg:     rgba(238,230,56,0.12);
  --chip-border: rgba(238,230,56,0.34);
  --chip-color:  var(--svim-gold-deep);

  --nav-scrolled-bg: rgba(19,18,23,0.88);
  --selection-bg: rgba(238,230,56,0.32);
  --selection-color: #131217;

  /* ── Tipografia (mesmas famílias do Design System Svim: reaproveitadas,
     a identidade You muda cor/tom, não a fonte) ── */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 14px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px;

  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:   280ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   450ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 650ms cubic-bezier(0.34,1.56,0.64,1);
}

.bg-grid {
  background-image: var(--bg-grid-lines);
  background-size: var(--bg-grid-size);
}
.bg-grid-dark {
  background-image: var(--bg-grid-lines-dark);
  background-size: var(--bg-grid-size);
}