/* ============================================================
   DRA. LARISSA VASCONCELOS VIANA: DESIGN TOKENS
   Paleta v2, base neutra/editorial (referência Sibien Institute):
   creme, grafite e carvão como cores estruturais; o dourado da
   marca oficial (logo / Protocolo Rinnovare) permanece como
   único toque de destaque, usado com moderação.
   Fundo predominantemente claro, tom clínico-editorial premium.
   ============================================================ */

:root {
  /* Marca (constantes) */
  --larissa-cream:     #f4f3f1; /* base clara predominante */
  --larissa-ivory:      #ede8e4; /* superfície secundária */
  --larissa-sand:       #e9e7e2; /* superfície terciária / faixas */
  --larissa-taupe:      #b4b0a4; /* neutro quente médio (bordas, divisores) */
  --larissa-graphite:   #878c92; /* cinza frio (textos grandes, apoio) */
  --larissa-charcoal:   #383838; /* texto principal / UI escura */
  --larissa-black:      #17171a; /* preto suave (botões, seções escuras) */
  --larissa-gold:       #af8c54; /* dourado da marca (logo / Rinnovare) - destaque único */
  --larissa-gold-light: #c9a567; /* dourado claro (hover em fundo escuro) */
  --larissa-gold-deep:  #8c6b3e; /* dourado escuro (texto legível em claro) */

  --grad-brand:   linear-gradient(135deg, var(--larissa-charcoal) 0%, var(--larissa-black) 100%);
  --grad-brand-h: linear-gradient(90deg, var(--larissa-graphite) 0%, var(--larissa-charcoal) 100%);
  --grad-accent:  linear-gradient(135deg, var(--larissa-gold-light) 0%, var(--larissa-gold) 100%);
  --grad-glow:    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(56,56,56,0.10) 0%, transparent 70%);

  /* ── Superfícies (tema claro, único) ── */
  --bg-base:      var(--larissa-cream);
  --bg-surface:   var(--larissa-ivory);
  --bg-elevated:  #f8f7f5;
  --bg-card:      #ffffff;
  --bg-highlight: var(--larissa-sand);
  --bg-dark:      var(--larissa-black); /* seções escuras pontuais (contraste) */
  --bg-overlay:   rgba(244,243,241,0.92);

  --n300: #5b5e63;
  --n400: #6f7378;
  --n500: var(--larissa-graphite);
  --n600: var(--larissa-taupe);
  --n700: var(--larissa-ivory);

  --text-primary:   var(--larissa-charcoal);
  --text-secondary: #5b5e63;
  --text-muted:     #8a8d91;
  --text-inverse:   #faf9f7;
  --text-disabled:  #c7c4bb;

  --border-subtle:  rgba(56,56,56,0.10);
  --border-default: rgba(56,56,56,0.18);
  --border-strong:  rgba(56,56,56,0.32);
  --border-focus:   var(--larissa-charcoal);

  --color-primary:   var(--larissa-charcoal);
  --color-secondary: var(--larissa-graphite);
  --color-accent:    var(--larissa-gold);
  --color-success:   #6f8f68;
  --color-warning:   var(--larissa-gold-deep);
  --color-error:     #a8564f;
  --color-info:      var(--larissa-graphite);

  --glow-primary: 0 0 30px rgba(56,56,56,0.16), 0 0 80px rgba(56,56,56,0.08);
  --glow-soft:    0 0 60px rgba(56,56,56,0.08);
  --shadow-card:    0 4px 24px rgba(23,23,26,0.08), 0 1px 4px rgba(23,23,26,0.05);
  --shadow-elevated: 0 20px 60px rgba(23,23,26,0.14), 0 4px 16px rgba(23,23,26,0.08);

  --hero-gradient: linear-gradient(160deg, #f8f7f5 0%, #f4f3f1 55%, #ede8e4 100%);
  --hero-glow-1:   radial-gradient(ellipse, rgba(56,56,56,0.07) 0%, transparent 70%);
  --hero-glow-2:   radial-gradient(ellipse, rgba(180,176,164,0.22) 0%, transparent 70%);
  --mouse-glow:    radial-gradient(ellipse, rgba(56,56,56,0.06) 0%, transparent 70%);
  --mesh-1:        radial-gradient(circle at 15% 30%, rgba(180,176,164,0.16) 0%, transparent 45%);
  --mesh-2:        radial-gradient(circle at 85% 70%, rgba(135,140,146,0.12) 0%, transparent 45%);

  /* Grade sutil (profundidade em fundos claros · ref. Aura/artools) */
  --bg-grid-size: 64px 64px;
  --bg-grid-lines:
    linear-gradient(to right, rgba(23, 23, 26, 0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 23, 26, 0.018) 1px, transparent 1px);
  --bg-grid-lines-dark:
    linear-gradient(to right, rgba(255, 250, 245, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 250, 245, 0.045) 1px, transparent 1px);
  --bg-dots-dark: radial-gradient(rgba(255, 250, 245, 0.08) 1px, transparent 1px);

  --chip-bg:     rgba(56,56,56,0.05);
  --chip-border: rgba(56,56,56,0.16);
  --chip-color:  var(--larissa-charcoal);

  --nav-scrolled-bg: rgba(248,247,245,0.86);
  --selection-bg: rgba(56,56,56,0.14);
  --selection-color: #17171a;

  /* ── Tipografia v2 (alinhada à marca + referência editorial Sibien) ──
     Display: Bodoni Moda (Didone, mesma família visual do logotipo)
     UI/Body: Jost (sans limpa, clínica e premium)
     Antes: Cinzel + Playfair + Montserrat + Poppins (4 famílias, redundante) */
  --font-display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --font-serif:   'Bodoni Moda', Georgia, serif;
  --font-heading: 'Jost', system-ui, sans-serif;
  --font-body:    'Jost', 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);
}