/* ═══════════════════════════════════════════════════════════════════
   EXPO REVISTE 2026 — DESIGN SYSTEM TOKENS
   UI/UX Pro Max · Obsidiana · Oro · Carmesí Editorial
   Paleta extraída del logo oficial: Oro #C9A84C · Carmesí #F30050
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ────────────────────────────────────────
     PALETA — Obsidiana · Oro · Carmesí
     Logo oficial: #F30050 (carmesí) + #C9A84C (oro)
  ──────────────────────────────────────── */
  --c-obsidian-deep:   #08070A;
  --c-obsidian:        #0C0A09;
  --c-obsidian-mid:    #141210;
  --c-obsidian-soft:   #1C1917;
  --c-stone-dark:      #292524;
  --c-stone:           #44403C;
  --c-stone-light:     #57534E;

  /* ORO — Principal */
  --c-gold:            #C9A84C;
  --c-gold-bright:     #E2C06A;
  --c-gold-light:      #EDD085;
  --c-gold-muted:      #8A6D2F;
  --c-gold-dark:       #5C4620;

  /* CARMESÍ — Del logo oficial #F30050 */
  --c-red:             #F30050;
  --c-red-bright:      #FF1A6B;
  --c-red-light:       #FF4D88;
  --c-red-muted:       #A8003A;
  --c-red-dark:        #6B0025;
  --c-red-glow:        rgba(243, 0, 80, 0.20);
  --c-red-subtle:      rgba(243, 0, 80, 0.08);

  --c-surface-glass:   rgba(20, 18, 16, 0.85);
  --c-surface-warm:    rgba(201, 168, 76, 0.06);
  --c-surface-border:  rgba(201, 168, 76, 0.15);
  --c-surface-border-subtle: rgba(255,255,255,0.06);

  --c-text-primary:    #F5F0E8;
  --c-text-secondary:  #A8A29E;
  --c-text-muted:      #78716C;
  --c-text-gold:       #C9A84C;

  --c-success:         #4ADE80;
  --c-error:           #F30050;   /* Usa el carmesí del logo para errores */
  --c-warning:         #FBBF24;

  /* ────────────────────────────────────────
     GRADIENTES
  ──────────────────────────────────────── */
  --g-hero:            radial-gradient(ellipse at 30% 50%, #1C1508 0%, #0C0A09 55%, #08070A 100%);
  --g-section-dark:    linear-gradient(180deg, #0C0A09 0%, #12100E 100%);
  --g-gold-line:       linear-gradient(90deg, transparent 0%, var(--c-gold) 50%, transparent 100%);
  --g-gold-shimmer:    linear-gradient(105deg, transparent 30%, rgba(201,168,76,0.18) 50%, transparent 70%);
  --g-card:            linear-gradient(145deg, #1C1917 0%, #141210 100%);
  --g-text-gold:       linear-gradient(135deg, #C9A84C 0%, #EDD085 50%, #C9A84C 100%);
  /* Gradientes carmesí */
  --g-red-line:        linear-gradient(90deg, transparent 0%, var(--c-red) 50%, transparent 100%);
  --g-text-red:        linear-gradient(135deg, #F30050 0%, #FF4D88 50%, #F30050 100%);
  --g-red-shimmer:     linear-gradient(105deg, transparent 30%, rgba(243,0,80,0.15) 50%, transparent 70%);
  /* Gradiente dual Oro + Carmesí (para acentos especiales) */
  --g-brand-accent:    linear-gradient(90deg, var(--c-gold) 0%, var(--c-red) 100%);
  /* Sombras carmesí */
  --shadow-red:        0 0 30px rgba(243,0,80,0.25), 0 0 80px rgba(243,0,80,0.08);
  --shadow-red-sm:     0 0 15px rgba(243,0,80,0.30);

  /* ────────────────────────────────────────
     TIPOGRAFÍA
     Montserrat — Todos los textos y títulos
     Cormorant  — Solo palabras destacadas (<em>, .highlight)
  ──────────────────────────────────────── */
  --font-display:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;  /* Headings en Montserrat */
  --font-body:     'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-script:   'Cormorant', Georgia, 'Times New Roman', serif;     /* Solo palabras destacadas */

  /* Escala tipográfica — Golden Ratio 1.618 */
  --text-2xs: clamp(0.55rem, 0.5vw,  0.65rem);
  --text-xs:  clamp(0.65rem, 0.6vw,  0.75rem);
  --text-sm:  clamp(0.78rem, 0.8vw,  0.875rem);
  --text-md:  clamp(1rem,    1vw,    1.0625rem);
  --text-lg:  clamp(1.2rem,  1.4vw,  1.375rem);
  --text-xl:  clamp(1.5rem,  2vw,    2rem);
  --text-2xl: clamp(2rem,    3vw,    3rem);
  --text-3xl: clamp(2.8rem,  5vw,    5rem);
  --text-4xl: clamp(3.5rem,  7vw,    7.5rem);
  --text-hero:clamp(4.5rem,  10vw,   11rem);

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

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.85;

  /* Letter spacing */
  --ls-tight:  -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.14em;
  --ls-widest:  0.22em;

  /* ────────────────────────────────────────
     ESPACIADO — Proporción Áurea
  ──────────────────────────────────────── */
  --sp-1:   0.25rem;    /*  4px */
  --sp-2:   0.5rem;     /*  8px */
  --sp-3:   0.75rem;    /* 12px */
  --sp-4:   1rem;       /* 16px */
  --sp-5:   1.25rem;    /* 20px */
  --sp-6:   1.5rem;     /* 24px */
  --sp-8:   2rem;       /* 32px */
  --sp-10:  2.5rem;     /* 40px */
  --sp-12:  3rem;       /* 48px */
  --sp-16:  4rem;       /* 64px */
  --sp-20:  5rem;       /* 80px */
  --sp-24:  6rem;       /* 96px */
  --sp-32:  8rem;       /* 128px */
  --sp-40:  10rem;      /* 160px */
  --sp-gold: 1.618rem;  /* Golden ratio unit */

  /* ────────────────────────────────────────
     LAYOUT
  ──────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-pad: clamp(var(--sp-6), 5vw, var(--sp-16));

  /* ────────────────────────────────────────
     RADIOS
  ──────────────────────────────────────── */
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ────────────────────────────────────────
     SOMBRAS
  ──────────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg:   0 16px 40px rgba(0,0,0,0.65);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.75);
  --shadow-gold: 0 0 30px rgba(201,168,76,0.20), 0 0 80px rgba(201,168,76,0.08);
  --shadow-gold-sm: 0 0 15px rgba(201,168,76,0.25);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ────────────────────────────────────────
     MOTION — Meaningful motion
  ──────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1.0, 1);
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-smooth:  280ms;
  --dur-slow:    500ms;
  --dur-slower:  800ms;
  --dur-crawl:   1200ms;

  /* ────────────────────────────────────────
     Z-INDEX STACK
  ──────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   50;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
  --z-cursor:   9999;

  /* ────────────────────────────────────────
     BORDES
  ──────────────────────────────────────── */
  --border-subtle: 1px solid rgba(255,255,255,0.06);
  --border-gold:   1px solid rgba(201,168,76,0.20);
  --border-gold-bright: 1px solid rgba(201,168,76,0.45);

  /* ────────────────────────────────────────
     NAVBAR HEIGHT (para offset)
  ──────────────────────────────────────── */
  --nav-height: 70px;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-smooth: 0ms;
    --dur-slow:   0ms;
    --dur-slower: 0ms;
    --dur-crawl:  0ms;
    --ease-spring: linear;
    --ease-expo:   linear;
  }
}