/* ═══════════════════════════════════════════════════════════
   LUXE GAIA — DESIGN TOKENS (fonte única de verdade)
   Paleta: Obsidian + Liquid Gold + Rose Gold (salão de beleza de luxo)
   Consumido por: styles.css, admin.css, vitrine/booking/cadastro/cliente/nps
   e demais páginas com <style> inline — todas devem referenciar estas
   variáveis em vez de hex duplicado, pra manter a interface coesa.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:wght@500;600;700&family=Montserrat:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ── Fundos ── */
  --bg:            #090909;
  --bg-alt:        #0D0D0D;
  --bg-card:       rgba(255,255,255,0.035);
  --bg-hover:      rgba(255,255,255,0.06);
  --bg-active:     rgba(212,175,55,0.12);
  --sidebar-bg:    #08080E;

  /* ── Dourado (cor principal) ── */
  --gold:          #D4AF37;
  --gold-light:    #E8C968;
  --gold-dark:     #A88B2A;
  --gold-glow:     rgba(212,175,55,0.25);
  --gold-subtle:   rgba(212,175,55,0.08);

  /* ── Rosé-gold (acento "beleza", uso pontual em destaques) ── */
  --gold-rose:       #B76E79;
  --gold-rose-light: #D398A1;
  --gold-rose-dark:  #8F4E58;

  /* ── Texto ── */
  --text:          #F0F0F0;
  --text-sec:      rgba(240,240,240,0.72);
  --text-muted:    rgba(240,240,240,0.45);
  --text-dark:     #1C1C1C;
  --text-gold:     var(--gold);
  --text-dim:      #6B5F53;

  /* ── Bordas & glass ── */
  --border:        rgba(255,255,255,0.07);
  --border-gold:   rgba(212,175,55,0.3);
  --border-glass:  rgba(212,175,55,0.15);
  --glass:         rgba(255,255,255,0.035);
  --glass-border:  rgba(212,175,55,0.16);

  /* ── Sobreposições (o "véu" de cards, hovers, bordas suaves) ──
     Em tema escuro clareia (branco); em tema claro precisa ESCURECER,
     senão vira branco sobre branco e o elemento some. luxe-theme.js
     inverte este par conforme o modo — nunca escreva rgba(255,255,255,x)
     direto de novo: use rgba(var(--ov-rgb), x). */
  --ov-rgb:        255,255,255;

  /* Tinta legível POR CIMA da cor de destaque (botão primário, badge).
     Calculada por contraste real em luxe-theme.js: destaque claro recebe
     tinta escura, destaque escuro recebe tinta clara. */
  --on-accent:     #0D0D0D;
  --on-accent-secondary: #FFFFFF;

  /* O destaque usado como LETRA (título, link, label). Diferente de --gold:
     aquele preenche botão, este precisa passar no contraste contra o fundo.
     luxe-theme.js recalcula por tema; aqui fica o valor do tema padrão. */
  --gold-ink:      #D4AF37;

  /* ── Status ── */
  --success:       #34D399;
  --success-bg:    rgba(52,211,153,0.12);
  --warning:       #FBBF24;
  --warning-bg:    rgba(251,191,36,0.12);
  --danger:        #F87171;
  --danger-bg:     rgba(248,113,113,0.12);
  --info:          #60A5FA;
  --info-bg:       rgba(96,165,250,0.12);
  --purple:        #C084FC;
  --purple-bg:     rgba(192,132,252,0.12);

  /* Mesma cor usada como TEXTO sobre o fundo tingido (ex: --danger-bg) — a
     versão "crua" acima é pra pontos/indicadores sólidos e só funciona lida
     sobre fundo escuro. luxe-theme.js recalcula por tema (ver tintaAcentoLegivel). */
  --success-ink:   #34D399;
  --warning-ink:   #FBBF24;
  --danger-ink:    #F87171;
  --info-ink:      #60A5FA;
  --purple-ink:    #C084FC;

  /* ── Raio ── */
  --radius-xs:     6px;
  --radius-sm:     10px;
  --radius:        14px;
  --radius-lg:     20px;
  --radius-xl:     28px;

  /* ── Sombras ── */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
  --shadow:        0 4px 24px rgba(0,0,0,0.45);
  --shadow-lg:     0 8px 48px rgba(0,0,0,0.6);
  --shadow-gold:   0 0 30px rgba(212,175,55,0.15);

  /* ── Movimento ── */
  --ease:          cubic-bezier(0.4,0,0.2,1);
  --ease-luxe:     cubic-bezier(0.16,1,0.3,1);
  --fast:          0.15s;
  --medium:        0.25s;
  --slow:          0.4s;

  /* ── Tipografia ── */
  --font-body:     'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading:  'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-display:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;

  /* ── Aliases de compatibilidade (nomes usados por styles.css) ──
     Mantém páginas antigas funcionando sem reescrever cada regra. */
  --primary:       var(--gold);
  --primary-dark:  var(--gold-dark);
  --secondary:     #C9A96E;
  --accent:        var(--gold-light);
  --amber:         #F59E0B;
  --bg-dark:       var(--bg);
  --bg-surface:    var(--bg-alt);
  --surface:       #1A1A25;
  --glass-bg:      var(--glass);
  --glass-shadow:  var(--shadow-lg);
  --radius-md:     var(--radius);
  --shadow-md:     var(--shadow);
  --shadow-glow:   var(--shadow-gold);
  --transition:    all 0.3s var(--ease);
  --font-main:     var(--font-body);
}