/* =========================================================
   ÁNGELES · Sistema de Tokens
   Variables raíz · Paleta · Tipografía · Espaciado · Sombras
   ========================================================= */

:root {
  /* ───── Paleta ───── */
  --gold-50:   #FBF5E6;
  --gold-100:  #F5E8C2;
  --gold-200:  #E8D4A0;
  --gold-300:  #D9BE74;
  --gold-400:  #D4AF37;   /* dorado base */
  --gold-500:  #C9A961;
  --gold-600:  #B8860B;
  --gold-700:  #8C6810;
  --gold-shimmer: linear-gradient(
      100deg,
      #B8860B 0%,
      #D4AF37 18%,
      #FFE9B0 35%,
      #FFFBE6 48%,
      #FFE9B0 62%,
      #D4AF37 80%,
      #B8860B 100%);

  --burdeos-900: #3A0E0F;
  --burdeos-800: #4A1417;
  --burdeos-700: #5C1A1B;   /* burdeos base */
  --burdeos-600: #6F2123;
  --burdeos-500: #8B2C2D;
  --burdeos-400: #A53A3C;

  --crema-100: #FDFBF5;
  --crema-200: #FAF6EE;     /* crema base */
  --crema-300: #F2EBDB;
  --crema-400: #E8DDC4;

  --noir-700: #2A2018;
  --noir-800: #1F1812;
  --noir-900: #1A1410;     /* negro suave base */
  --noir-950: #0F0B08;

  /* ───── Semánticos ───── */
  --bg:               var(--crema-200);
  --bg-elev:          #FFFFFF;
  --bg-deep:          var(--noir-900);
  --bg-deep-2:        var(--burdeos-900);
  --surface:          #FFFFFF;
  --surface-tint:     var(--crema-100);
  --text:             var(--noir-900);
  --text-soft:        #5A4A3A;
  --text-mute:        #8C7B68;
  --text-on-dark:     var(--crema-200);
  --text-on-gold:     var(--noir-900);
  --line:             rgba(184, 134, 11, .2);
  --line-soft:        rgba(184, 134, 11, .1);
  --gold:             var(--gold-400);
  --gold-deep:        var(--gold-600);
  --burdeos:          var(--burdeos-700);
  --burdeos-deep:     var(--burdeos-900);

  /* ───── Tipografía ───── */
  --font-display: "Italianno", "Allura", "Brush Script MT", cursive;   /* "Ángeles" lettering */
  --font-serif:   "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:    "Manrope", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

  --fs-eyebrow:   .72rem;     /* 11.5px — small caps */
  --fs-xs:        .8125rem;   /* 13 */
  --fs-sm:        .9375rem;   /* 15 */
  --fs-base:      1.0625rem;  /* 17 */
  --fs-lg:        1.25rem;    /* 20 */
  --fs-xl:        1.5rem;     /* 24 */
  --fs-2xl:       2rem;       /* 32 */
  --fs-3xl:       2.75rem;    /* 44 */
  --fs-4xl:       4rem;       /* 64 */
  --fs-5xl:       5.5rem;     /* 88 */
  --fs-display:   clamp(5rem, 14vw, 11rem);

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.6;
  --lh-loose:   1.85;
  --tracking-eyebrow: .32em;
  --tracking-wide:    .15em;

  /* ───── Espaciado ───── */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ───── Radios y bordes ───── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ───── Sombras ───── */
  --shadow-soft:   0 2px 14px rgba(60, 30, 10, .06);
  --shadow-card:   0 14px 38px -16px rgba(60, 30, 10, .22);
  --shadow-hover:  0 22px 60px -22px rgba(92, 26, 27, .35);
  --shadow-gold:   0 14px 40px -14px rgba(212, 175, 55, .55);
  --shadow-deep:   0 30px 80px -30px rgba(0, 0, 0, .55);

  /* ───── Animaciones ───── */
  --ease-out:      cubic-bezier(.22, 1, .36, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --ease-soft:     cubic-bezier(.4, .1, .2, 1);
  --t-fast:    .18s;
  --t-base:    .32s;
  --t-slow:    .55s;
  --t-cinema:  .9s;

  /* ───── Layout ───── */
  --header-h: 76px;
  --z-nav: 60;
  --z-fab: 70;
  --z-modal: 90;
}

/* Modo oscuro opcional (preparado, no activado) */
@media (prefers-color-scheme: dark) {
  /* el tema crema se mantiene por marca; sólo ajustamos contrastes mínimos */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}