/* ===================================================
   SISTEMA DE DISEÑO — Almadara · Psicología Holística
   =================================================== */

:root {
  /* Paleta Mística y Holística (Anti-Genérica!) */
  --clr-bg: #FDFBFA; /* Fondo cálido como papel viejo */
  --clr-bg-alt: #F9F4F1; /* Terracota muy claro */
  --clr-bg-subtle: #FEFCF9; /* Fondo sutil con toque de crema */
  --clr-surface: #ffffff;
  --clr-text: #2B1E20; /* Negro profundo con matiz borgoña */
  --clr-text-muted: #7A6266; /* Gris cálido y aterciopelado */
  --clr-accent: #9D5C63; /* Borgoña vintage elegante */
  --clr-accent-soft: #E2C5C8; /* Rosa apagado suave */
  --clr-accent-dark: #663339; /* Borgoña oscuro intenso */
  --clr-gold: #C9A96E; /* Dorado antiguo (no genérico!) */
  --clr-gold-soft: #F3E9D7; /* Dorado muy claro */
  --clr-iris: #7C6A8E; /* Iris púrpura único */
  --clr-iris-soft: #E3DEE8; /* Iris muy claro */
  --clr-moss: #8B9A7C; /* Musgo terroso */
  --clr-moss-soft: #E4E9E0; /* Musgo muy claro */
  --clr-border: #EAE0DE;

  /* Typografía Premium Editorial con Personalidad */
  --ff-heading: "Playfair Display", Georgia, serif;
  --ff-body: "Outfit", system-ui, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1.05rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.25rem;
  --fs-2xl: 3.25rem;
  --fs-3xl: 4.25rem;
  --fs-hero: clamp(3.2rem, 6.5vw + 1rem, 6rem);

  /* Espaciado con Ritmo Único */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1.25rem;
  --sp-lg: 2rem;
  --sp-xl: 3rem;
  --sp-2xl: 4.5rem;
  --sp-3xl: 6rem;
  --sp-4xl: 8rem;

  /* Bordes y Sombras con Personalidad */
  --radius-sm: 6px; /* Esquinas ligeramente menos redondeadas para más carácter */
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 40px;
  --radius-pill: 9999px;
  --radius-soft: 12px 24px 12px 24px; /* Borde orgánico único */

  --shadow-sm: 0 3px 12px rgba(43, 30, 32, 0.05);
  --shadow-md: 0 8px 28px rgba(43, 30, 32, 0.08);
  --shadow-lg: 0 18px 46px rgba(43, 30, 32, 0.12);
  --shadow-xl: 0 28px 72px rgba(43, 30, 32, 0.15);
  --shadow-glow: 0 0 32px rgba(157, 92, 99, 0.18);
  --shadow-inner-soft: inset 0 1px 0 rgba(255,255,255,0.5);

  /* Transiciones con Ritmo */
  --transition-spring: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  --transition: 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  --max-width: 1280px;
}

/* ─── TEMA DE MODO OSCURO MÍSTICO ─── */
[data-theme="dark"] {
  --clr-bg:           #181112;
  --clr-bg-alt:       #23181A;
  --clr-surface:      #2D1F21;
  --clr-text:         #F3E9E6;
  --clr-text-muted:   #C4A8AD;
  --clr-accent:       #E2A9AE;
  --clr-accent-soft:  #5D363B;
  --clr-accent-dark:  #F7EDEB;
  --clr-gold:         #D9BF8D;
  --clr-gold-soft:    #40362A;
  --clr-iris:         #9F8EB2;
  --clr-iris-soft:    #3A3144;
  --clr-moss:         #9AA88D;
  --clr-moss-soft:    #31392C;
  --clr-border:       #433134;
  --shadow-sm:        0 3px 12px rgba(0,0,0,0.5);
  --shadow-md:        0 8px 28px rgba(0,0,0,0.6);
  --shadow-lg:        0 18px 46px rgba(0,0,0,0.7);
  --shadow-xl:        0 28px 72px rgba(0,0,0,0.8);
  --shadow-glow:      0 0 32px rgba(226, 169, 174, 0.12);
  --clr-bg-subtle:    #1D1516;
}