/* ============================================================================
   TEMAS VISUALES
   ----------------------------------------------------------------------------
   Cada tema define colores y tipografías. Se cambia con el atributo
   data-theme en <html>. El selector flotante los alterna en vivo.
   ========================================================================== */

:root {
  /* Tipografías (compartidas) */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-script:  'Great Vibes', cursive;
  --font-body:    'Jost', system-ui, sans-serif;

  /* Espaciado / medidas base */
  --radius: 14px;
  --maxw: 1100px;
  --section-pad: clamp(3.5rem, 9vw, 7rem);
  --nav-h: 64px;
}

/* ---------------- TEMA 1: ELEGANTE (minimalista, crema/negro) ---------------- */
[data-theme="elegante"] {
  --bg:        #f6f2ec;
  --bg-alt:    #ece5da;
  --surface:   #ffffff;
  --text:      #2b2724;
  --text-soft: #6f665c;
  --accent:    #b08d57;   /* dorado suave */
  --accent-2:  #8a7a68;
  --line:      #d9cfc2;
  --hero-overlay: rgba(30,26,22,.35);
  --shadow: 0 18px 50px -20px rgba(60,45,30,.35);
}

/* ---------------- TEMA 2: ROMÁNTICO (rosa/salvia/dorado) ---------------- */
[data-theme="romantico"] {
  --bg:        #fbf6f4;
  --bg-alt:    #f3e9e6;
  --surface:   #ffffff;
  --text:      #4a3b3b;
  --text-soft: #8a7573;
  --accent:    #c98b8b;   /* rosa terroso */
  --accent-2:  #8ba888;   /* verde salvia */
  --line:      #e7d6d2;
  --hero-overlay: rgba(74,59,59,.32);
  --shadow: 0 18px 50px -20px rgba(120,80,80,.35);
}

/* ---------------- TEMA 3: NOCHE (moderno, oscuro, impacto) ---------------- */
[data-theme="noche"] {
  --bg:        #14151a;
  --bg-alt:    #1c1e26;
  --surface:   #22242e;
  --text:      #f0ede8;
  --text-soft: #a9a6a0;
  --accent:    #c9a86a;   /* dorado */
  --accent-2:  #d8c9a8;
  --line:      #33353f;
  --hero-overlay: rgba(8,8,12,.55);
  --shadow: 0 20px 60px -25px rgba(0,0,0,.7);
}


/* ============================================================================
   OKLCH — los mismos temas en espacio perceptual (rediseño 2.0)
   El hex de arriba queda como fallback; acá la luminosidad es uniforme entre
   temas (misma L = mismo peso visual) y el tono no deriva al aclarar/oscurecer.
   Contrastes verificados: texto/fondo >= 7:1 en los tres temas.
   ========================================================================== */
@supports (color: oklch(50% 0.1 90)) {
  [data-theme="elegante"] {
    --bg:        oklch(96.2% 0.011 85);
    --bg-alt:    oklch(92.3% 0.016 84);
    --surface:   oklch(100% 0 0);
    --text:      oklch(25.5% 0.010 65);
    --text-soft: oklch(51.5% 0.021 75);
    --accent:    oklch(66.0% 0.088 76);
    --accent-2:  oklch(57.5% 0.031 72);
    --line:      oklch(85.5% 0.020 80);
  }
  [data-theme="romantico"] {
    --bg:        oklch(97.4% 0.007 34);
    --bg-alt:    oklch(94.0% 0.012 32);
    --surface:   oklch(100% 0 0);
    --text:      oklch(36.5% 0.020 20);
    --text-soft: oklch(58.5% 0.028 21);
    --accent:    oklch(69.0% 0.079 20);
    --accent-2:  oklch(68.5% 0.055 145);
    --line:      oklch(88.5% 0.018 30);
  }
  [data-theme="noche"] {
    --bg:        oklch(19.5% 0.011 275);
    --bg-alt:    oklch(23.5% 0.014 274);
    --surface:   oklch(26.5% 0.015 273);
    --text:      oklch(94.8% 0.008 85);
    --text-soft: oklch(72.0% 0.011 85);
    --accent:    oklch(73.5% 0.089 82);
    --accent-2:  oklch(83.5% 0.049 86);
    --line:      oklch(32.5% 0.014 273);
  }
}