/* ============================================================
   GRUPO SVIM: INSTITUTO DE BELEZA — DESIGN TOKENS
   Base clara/branca predominante, identidade oficial preto + branco +
   dourado/amarelo (extraído dos arquivos de marca: Marca-Svim-*.png,
   Simbolo-Svim-*.png). Símbolo: borboleta.
   Arquitetura de tokens no mesmo padrão Kestriah (ver referência
   Dra. Larissa), com paleta, tipografia e fontes próprias da Svim.
   ============================================================ */

/* Reset base (igual larissa-landing.css): sem isso, qualquer elemento com
   width em % + padding (ex.: .lk-page) soma padding por fora da largura da
   tela e quebra o responsivo (overflow horizontal). Carregado em todas as
   páginas via svim-theme.css. */
*, *::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:        #ffb600; /* dourado/amarelo oficial (logo + símbolo) */
  --svim-gold-light:  #ffce5c; /* dourado claro, hover em fundo escuro */
  --svim-gold-deep:   #b87f00; /* dourado escuro, texto legível em claro */
  --svim-gold-soft:   #fff1cf; /* tint muito claro, fundos de badge/chip */
  --svim-black:       #212322; /* preto oficial da marca (wordmark/símbolo) */
  --svim-ink:         #101112; /* preto profundo, seções escuras/CTAs */
  --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, #2c2d2c 0%, var(--svim-ink) 100%);
  --grad-glow-gold: radial-gradient(ellipse, rgba(255,182,0,0.35) 0%, transparent 70%);
  --grad-glow-ink:  radial-gradient(ellipse, rgba(16,17,18,0.16) 0%, transparent 70%);

  /* ── Superfícies (tema claro, único) ── */
  --bg-base:      var(--svim-white);
  --bg-surface:   #f7f6f2;
  --bg-elevated:  #fbfaf7;
  --bg-card:      #ffffff;
  --bg-highlight: #efece3;
  --bg-dark:      var(--svim-ink);
  --bg-overlay:   rgba(255,255,255,0.92);

  --text-primary:   var(--svim-black);
  --text-secondary: #55564f;
  --text-muted:     #8a8b83;
  --text-inverse:   #fbfaf7;
  --text-disabled:  #cfcec4;

  --border-subtle:  rgba(33,35,34,0.10);
  --border-default: rgba(33,35,34,0.18);
  --border-strong:  rgba(33,35,34,0.32);
  --border-focus:   var(--svim-black);

  --color-primary:   var(--svim-black);
  --color-secondary: var(--svim-gold-deep);
  --color-accent:    var(--svim-gold);
  --color-success:   #4c9a6b;
  --color-warning:   #b76e00;
  --color-error:     #c0453d;
  --color-info:      #4c6fa5;

  --glow-primary: 0 0 30px rgba(255,182,0,0.28), 0 0 80px rgba(255,182,0,0.12);
  --glow-soft:    0 0 60px rgba(255,182,0,0.14);
  --shadow-card:     0 4px 24px rgba(16,17,18,0.08), 0 1px 4px rgba(16,17,18,0.05);
  --shadow-elevated: 0 20px 60px rgba(16,17,18,0.16), 0 4px 16px rgba(16,17,18,0.08);

  --hero-gradient: linear-gradient(160deg, #ffffff 0%, #fdfbf6 45%, #fff2d4 100%);
  --hero-glow-1:   radial-gradient(ellipse, rgba(255,182,0,0.30) 0%, transparent 70%);
  --hero-glow-2:   radial-gradient(ellipse, rgba(33,35,34,0.10) 0%, transparent 70%);
  --mouse-glow:    radial-gradient(ellipse, rgba(255,182,0,0.16) 0%, transparent 70%);
  --mesh-1:        radial-gradient(circle at 12% 25%, rgba(255,182,0,0.14) 0%, transparent 45%);
  --mesh-2:        radial-gradient(circle at 88% 75%, rgba(33,35,34,0.07) 0%, transparent 45%);

  /* Grade sutil (profundidade em fundos claros) */
  --bg-grid-size: 64px 64px;
  --bg-grid-lines:
    linear-gradient(to right, rgba(16,17,18,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,17,18,0.02) 1px, transparent 1px);
  --bg-grid-lines-dark:
    linear-gradient(to right, rgba(255,246,224,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,246,224,0.05) 1px, transparent 1px);
  --bg-dots-dark: radial-gradient(rgba(255,246,224,0.09) 1px, transparent 1px);

  --chip-bg:     rgba(255,182,0,0.12);
  --chip-border: rgba(255,182,0,0.38);
  --chip-color:  var(--svim-gold-deep);

  --nav-scrolled-bg: rgba(255,255,255,0.88);
  --selection-bg: rgba(255,182,0,0.28);
  --selection-color: #17171a;

  /* ── Tipografia (identidade Svim) ──
     Display/H1–H3: Montserrat Black/Bold, a mesma família geométrica
     do logotipo oficial (fonts_used.txt do projeto de marca).
     UI/Body: Inter, sans neutra de alta legibilidade para textos,
     labels, navegação e formulários. Duas famílias apenas. */
  --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;

  /* ── Espaçamento ── */
  --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;

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

  /* ── Transições ── */
  --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);
}

/* Grade de fundo (linhas sutis para profundidade) */
.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);
}