/* ═══════════════════════════════════════════════════════════════════════════
   QUEENS ACADEMY — DESIGN TOKENS (variables.css)
   TEMA: "Luxury Curation" — charcoal · cream · oro · champagne · magenta
   Fuente única de verdad de paleta, tipografía, espaciado y motion.
   No usar valores HEX/px en otros archivos: SOLO referenciar var(--token).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ─── PALETA "LUXURY CURATION" ───────────────────────────────────────────
     Deep charcoal contrast  #1a1a1a
     Background warmth cream  #FFF5F0
     Primary gold accenting   #D4AF37
     Subtle champagne         #E8D4A6
     Elegant magenta highlight#FF2D87                                         */

  /* Charcoal (color oscuro principal: fondos, headers). Conserva el nombre
     --aubergine por compatibilidad, pero ahora es CHARCOAL. */
  /* TEMA "CHAMPAGNE ROSÉ" — rosa empolvado · espresso vino · oro antiguo · rosa profundo.
     Conserva los nombres de token por compatibilidad; solo cambian los valores. */
  --aubergine:        #241318;   /* espresso vino (superficies oscuras) */
  --aubergine-deep:   #180D12;   /* espresso extra oscuro */
  --aubergine-light:  #33202A;   /* espresso cálido (cards oscuras) */
  --aubergine-soft:   #46303A;   /* hover sobre dark */

  --gold:             #A9843E;   /* ORO ANTIGUO: CTAs, acentos, logo */
  --gold-light:       #C6A35A;   /* hover claro */
  --gold-dark:        #856526;   /* sombras, profundidad del oro */

  --champagne:        #E9D6B4;   /* champagne SUTIL: bordes, eyebrows, fondos */
  --champagne-light:  #F3E7CC;
  --champagne-dark:   #CBB27E;

  --rose-gold:        #B87F8E;   /* rosa dorado (acento sutil congruente) */
  --rose-gold-soft:   #D8AEB8;

  --magenta:          #9E5A6B;   /* rosa empolvado profundo: badges, acentos */
  --magenta-deep:     #7E4557;

  --plum:             #3A1B24;   /* vino de acento (tarjetas flotantes) */

  --lavender:         #F3E7E3;   /* tinte rosé suave */
  --lavender-soft:    #F9F0ED;

  --cream:            #ECDCD7;   /* fondo rosa champagne (ground principal) */
  --mist:             #E5D3CE;   /* rosa champagne alterno */
  --ink:              #241318;   /* espresso vino: texto principal */
  --ink-soft:         #5A464E;   /* texto secundario sobre claro */
  --pearl:            #FFFFFF;   /* blanco puro (cards que deben resaltar) */

  --gray-100:         #F5F1EC;
  --gray-300:         #D8D2CB;
  --gray-500:         #9A918A;
  --gray-700:         #4A453F;

  /* ─── GRADIENTES (oro-primario, en paleta) ───────────────────────────── */
  --gradient-luxe:    linear-gradient(135deg, var(--gold) 0%, var(--champagne) 48%, var(--magenta) 100%);
  --gradient-night:   linear-gradient(150deg, var(--aubergine-deep) 0%, var(--aubergine) 55%, var(--aubergine-light) 100%);
  --gradient-pearl:   linear-gradient(180deg, var(--pearl) 0%, var(--cream) 100%);
  --gradient-aurora:  linear-gradient(120deg, var(--magenta) 0%, var(--gold) 55%, var(--champagne) 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  --gradient-holographic: linear-gradient(115deg, var(--magenta) 0%, var(--gold) 45%, var(--champagne) 72%, var(--magenta) 100%);
  --gradient-iridescent:  conic-gradient(from 180deg at 50% 50%, var(--gold), var(--champagne), var(--magenta), var(--gold));
  --gradient-glow:        radial-gradient(circle at 30% 20%, rgba(169,132,62,0.20), transparent 60%), radial-gradient(circle at 80% 80%, rgba(158,90,107,0.16), transparent 55%);
  --gradient-text-luxe:   linear-gradient(100deg, var(--gold), var(--champagne) 45%, var(--magenta));

  /* ─── TIPOGRAFÍA ─────────────────────────────────────────────────────────
     Headings serif: Playfair Display + Cormorant Garamond
     Body/UI sans:   Outfit                                                  */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent:  'Cormorant Garamond', 'Playfair Display', serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-3xs: 0.625rem;   /* 10px */
  --fs-2xs: 0.75rem;    /* 12px */
  --fs-xs:  0.875rem;   /* 14px */
  --fs-sm:  0.95rem;    /* ~15px */
  --fs-md:  1rem;       /* 16px */
  --fs-lg:  1.125rem;   /* 18px */
  --fs-xl:  1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */
  --fs-4xl: 3rem;       /* 48px */
  --fs-5xl: 4rem;       /* 64px */
  --fs-6xl: 5rem;       /* 80px */
  --fs-display: clamp(3rem, 8vw, 6.5rem);

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-loose:   1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.25em;

  /* ─── ESPACIADO ──────────────────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --space-4xl: 10rem;

  /* ─── RADII ──────────────────────────────────────────────────────────── */
  --radius-xs:  0.25rem;
  --radius-sm:  0.5rem;
  --radius-md:  1rem;
  --radius-lg:  1.5rem;
  --radius-xl:  2rem;
  --radius-2xl: 3rem;
  --radius-full: 9999px;

  /* ─── SOMBRAS ────────────────────────────────────────────────────────── */
  --shadow-soft:    0 4px 16px rgba(26, 26, 26, 0.06);
  --shadow-md:      0 10px 30px rgba(26, 26, 26, 0.10);
  --shadow-lg:      0 24px 60px rgba(26, 26, 26, 0.18);
  --shadow-xl:      0 40px 90px rgba(26, 26, 26, 0.25);
  --shadow-glow:    0 0 40px rgba(169, 132, 62, 0.32);      /* antique gold glow */
  --shadow-magenta: 0 8px 32px rgba(158, 90, 107, 0.30);    /* rosé glow */
  --shadow-violet:  0 12px 40px rgba(169, 132, 62, 0.26);   /* antique gold glow (compat) */
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.1);

  /* ─── GLASSMORPHISM ──────────────────────────────────────────────────── */
  --glass-bg:        rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-bg-light:  rgba(255, 255, 255, 0.65);
  --glass-border:    1px solid rgba(255, 255, 255, 0.18);
  --glass-blur:      blur(18px) saturate(140%);

  /* ─── BORDES ─────────────────────────────────────────────────────────── */
  --border-thin:   1px solid rgba(26, 26, 26, 0.08);
  --border-medium: 1px solid rgba(26, 26, 26, 0.15);
  --border-gold:   1px solid var(--gold);
  --border-glass:  1px solid rgba(255, 255, 255, 0.12);

  /* ─── MOTION ─────────────────────────────────────────────────────────── */
  --ease-luxe:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-fast:  0.2s;
  --duration-base:  0.4s;
  --duration-slow:  0.8s;
  --duration-luxe:  1.2s;

  /* ─── LAYOUT ─────────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;
  --content-pad:   clamp(1rem, 4vw, 2.5rem);

  /* ─── Z-INDEX ────────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* ─── DARK SECTION OVERRIDES ─────────────────────────────────────────────
   Aplica esta clase a una section/div para invertir tokens automáticamente. */
.theme-dark {
  --bg-surface:    var(--aubergine);
  --bg-surface-2:  var(--aubergine-deep);
  --text-primary:  var(--pearl);
  --text-secondary: rgba(255,255,255,0.7);
  --border-thin:   1px solid rgba(255,255,255,0.08);
}

.theme-light {
  --bg-surface:    var(--cream);
  --bg-surface-2:  var(--pearl);
  --text-primary:  var(--ink);
  --text-secondary: var(--gray-700);
}