/* ═══════════════════════════════════════════════════════════════════
   tokens.css — Design System del Brochure E-DESARROLLO v2
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand institucional (heredado del sitio) ─────────────────── */
  --ed-primary:        #213a68;
  --ed-primary-light:  #2f6fb6;
  --ed-secondary:      #fdc618;
  --ed-secondary-dark: #d4a30f;

  /* ─── Paleta brochure (dark theme) ──────────────────────────────── */
  --bg-base:    #0a1429;
  --bg-elev-1:  #14213d;
  --bg-elev-2:  #1a2a47;

  --surface:        rgba(255, 255, 255, 0.025);
  --surface-hover:  rgba(200, 162, 60, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.04);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);
  --border-gold:   rgba(200, 162, 60, 0.22);
  --border-gold-strong: rgba(200, 162, 60, 0.40);

  /* ─── Texto ────────────────────────────────────────────────────── */
  --text:        rgba(255, 255, 255, 0.92);
  --text-soft:   rgba(255, 255, 255, 0.78);
  --text-muted:  rgba(255, 255, 255, 0.55);
  --text-dim:    rgba(255, 255, 255, 0.35);

  /* ─── Acento dorado (jerarquía visual) ─────────────────────────── */
  --gold:       #c8a23c;
  --gold-light: #e6c264;
  --gold-dark:  #9c7d2a;
  --gold-glow:  rgba(200, 162, 60, 0.25);

  /* ─── Acentos sectoriales ──────────────────────────────────────── */
  --accent-blue:   #3498db;
  --accent-green:  #2ecc71;
  --accent-orange: #f97316;
  --accent-red:    #e74c3c;
  --accent-purple: #9d7ab5;
  --accent-teal:   #57757e;

  /* ─── Tipografía ──────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-heading: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Courier New', ui-monospace, SFMono-Regular, monospace;

  /* Escala fluida tipográfica — clamp(min, fluid, max).
     Para sizes grandes (xl en adelante) usamos min(vw, vh) en la parte fluida
     para evitar que crezcan demasiado en pantallas anchas pero bajas (laptops 16") */
  --fs-xs:      clamp(0.7rem,   0.65rem + 0.2vw,  0.85rem);
  --fs-sm:      clamp(0.8rem,   0.75rem + 0.25vw, 0.95rem);
  --fs-base:    clamp(0.9rem,   0.85rem + 0.3vw,  1.1rem);
  --fs-md:      clamp(1rem,     0.95rem + 0.4vw,  1.3rem);
  --fs-lg:      clamp(1.2rem,   1.1rem  + 0.7vw,  1.7rem);
  --fs-xl:      clamp(1.4rem,   1.2rem  + min(1vw, 1.5vh),    2.2rem);
  --fs-2xl:     clamp(1.7rem,   1.4rem  + min(1.6vw, 2vh),    3rem);
  --fs-3xl:     clamp(2rem,     1.6rem  + min(2.2vw, 2.8vh),  3.8rem);
  --fs-display: clamp(2.6rem,   2rem    + min(4vw, 5vh),      6rem);

  /* Pesos */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line-heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ─── Spacing escala 4px ──────────────────────────────────────── */
  --sp-1:  0.25rem;  /*  4px */
  --sp-2:  0.5rem;   /*  8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.5rem;   /* 24px */
  --sp-6:  2rem;     /* 32px */
  --sp-7:  3rem;     /* 48px */
  --sp-8:  4rem;     /* 64px */
  --sp-9:  6rem;     /* 96px */

  /* Padding fluido para slides — más generoso en desktop, pero no exagerado en laptops bajos */
  --slide-pad-x: clamp(1rem, 4vw, 5rem);
  --slide-pad-y: clamp(1rem, 3vh, 3rem);

  /* ─── Radii ───────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 100px;
  --r-full: 9999px;

  /* ─── Sombras ─────────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.20);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 8px 32px rgba(200, 162, 60, 0.18);
  --shadow-glow: 0 0 40px rgba(200, 162, 60, 0.30);

  /* ─── Transiciones ─────────────────────────────────────────────── */
  --t-fast:    0.15s ease;
  --t-base:    0.3s ease;
  --t-slow:    0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slide:   0.6s cubic-bezier(0.32, 0.72, 0, 1);
  --easing:    cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out: cubic-bezier(0.0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Layout ──────────────────────────────────────────────────── */
  --content-max:   1320px;
  --content-narrow: 800px;

  /* Chrome de la UI */
  --nav-h:      72px;
  --nav-h-mob:  64px;
  --back-btn-top: 14px;

  /* ─── Z-index ─────────────────────────────────────────────────── */
  --z-base:    1;
  --z-deck:    10;
  --z-slide:   20;
  --z-overlay: 100;
  --z-nav:     200;
  --z-back:    300;
  --z-modal:   400;

  /* ─── Breakpoints (referencia, no se usan en CSS directamente) ── */
  /* mobile: 0 — 599px
     tablet: 600 — 1023px
     desktop: 1024+ */
}

/* ─── Modo light/print (PDF) ───────────────────────────────────── */
@media print {
  :root {
    --bg-base:    #ffffff;
    --bg-elev-1:  #f9f9f9;
    --bg-elev-2:  #ffffff;
    --text:       #1a1a1a;
    --text-soft:  #333333;
    --text-muted: #555555;
    --gold:       #b8902a;
    --gold-light: #c8a23c;
    --border-subtle: #e0e0e0;
    --border-gold:   #d4a30f;
  }
}

/* ─── Reduce motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  0s;
    --t-base:  0s;
    --t-slow:  0s;
    --t-slide: 0s;
  }
}