:root {
  --palette-lilac:      #B993FF;
  --palette-turquoise:  #8FFBFF;
  --palette-green:      #85FFA6;
  --palette-coral:      #FF9A73;
  --palette-violet:     #5C32A1;
  --palette-white:      #FFFFFF;
  --palette-ink:        #231358;
  --palette-pink:       #EA56B1;

  /* Color principal de marca (logos, headings, cursor) */
  --color-primary:      var(--palette-lilac);

  /* Color secundario / profundidad */
  --color-secondary:    var(--palette-violet);

  /* Acentos */
  --color-accent-cyan:  var(--palette-turquoise);
  --color-accent-coral: var(--palette-coral);
  --color-accent-green: var(--palette-green);
  --color-accent-pink: var(--palette-pink);

  /* Neutros */
  --color-white:        var(--palette-white);
  --color-bg:           var(--palette-ink);

  --color-magenta:      var(--palette-lilac);
  --color-violet:       var(--palette-violet);
  --color-teal:         var(--palette-turquoise);
  --color-coral:        var(--palette-coral);
  --color-green:        var(--palette-green);

  /* ── SUPERFICIES GLASS
  ───────────────────────────────────────────────── */
--glass-bg:    color-mix(in srgb, var(--palette-white)  10%, transparent);
--glass-border: color-mix(in srgb, var(--palette-white) 16%, transparent);

  /* ── COLORES DE CARDS INDIVIDUALES
  ───────────────────────────────────────────────── */
  --card-1-color:       var(--palette-coral);
  --card-2-color:       var(--palette-lilac);
  --card-3-color:       var(--palette-turquoise);
  --card-4-color:       var(--palette-green);

  /* Colores para cards de filosofía */
  --phil-1-color:       var(--palette-turquoise);
  --phil-2-color:       var(--palette-lilac);
  --phil-3-color:       var(--palette-coral);

/* Colores para los botones */
--color-btn-primary:      var(--palette-pink);
--color-btn-primary-text: var(--palette-ink);

  /* ── COLORES DE OVERLAYS Y FONDOS DE NAVEGACIÓN
  ───────────────────────────────────────────────── */
  --nav-bg:             color-mix(in srgb, var(--palette-ink) 88%, transparent);
  --drawer-bg:          color-mix(in srgb, var(--palette-ink) 98%, transparent);
  --overlay-bg:         color-mix(in srgb, var(--palette-ink) 70%, transparent);
  --dropdown-bg:        color-mix(in srgb, var(--palette-ink) 97%, transparent);

  /* ── TOKENS DE DISEÑO ── */

  --radius-xl:          32px;
  --radius-md:          16px;
  --radius-sm:          8px;

  --font-display:       'Outfit', sans-serif;
  --font-body:          'DM Sans', sans-serif;

  --space-xs:           8px;
  --space-sm:           16px;
  --space-md:           24px;
  --space-lg:           48px;
  --space-xl:           96px;

  --transition-fast:    0.2s ease;
  --transition-base:    0.3s ease;
  --transition-slow:    0.4s cubic-bezier(0.4, 0, 0.2, 1);

  --z-cursor:           9999;
  --z-drawer:           160;
  --z-overlay:          150;
  --z-nav:              100;
}