/* ============================================
   EDP STUDIO — DESIGN TOKENS
   Variables base del sistema visual
   ============================================ */

:root {
  /* ─── COLORES BASE ─── */
  --ink:        #0d0d0d;          /* Negro profundo, fondo principal */
  --ink-soft:   #161616;          /* Negro suave, cards y secciones */
  --paper:      #f5f0e8;          /* Crema, texto claro y secciones invertidas */
  --paper-soft: #e8e2d6;          /* Crema apagado */

  /* ─── PALETA CMYK (del logo de EDP) ─── */
  --cyan:       #00B4E6;
  --magenta:    #E91E8C;
  --yellow:     #FFE600;
  --orange:     #FF3D00;          /* Acento principal EDP */

  /* ─── VARIANTES CMYK con transparencia (para mesh + glows) ─── */
  --cyan-soft:    rgba(0, 180, 230, 0.35);
  --magenta-soft: rgba(233, 30, 140, 0.35);
  --yellow-soft:  rgba(255, 230, 0, 0.30);
  --orange-soft:  rgba(255, 61, 0, 0.40);

  /* ─── ESCALA DE GRISES ─── */
  --gray-900:   #1a1a1a;
  --gray-800:   #2a2a2a;
  --gray-700:   #3a3a3a;
  --gray-600:   #5a5a5a;
  --gray-500:   #7a7a7a;
  --gray-400:   #9a9a9a;
  --gray-300:   #bababa;
  --muted:      #888580;

  /* ─── TIPOGRAFÍA ─── */
  --font-display: 'Bricolage Grotesque', 'Impact', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-script:  'Caveat', 'Comic Sans MS', cursive;   /* Para el toque "doodle" */

  /* ─── ESCALA TIPOGRÁFICA (fluida) ─── */
  --fs-xs:     clamp(0.7rem,  0.65rem + 0.2vw, 0.8rem);
  --fs-sm:     clamp(0.8rem,  0.75rem + 0.25vw, 0.9rem);
  --fs-base:   clamp(1rem,    0.95rem + 0.25vw, 1.1rem);
  --fs-lg:     clamp(1.2rem,  1.1rem + 0.5vw, 1.5rem);
  --fs-xl:     clamp(1.5rem,  1.3rem + 1vw, 2.2rem);
  --fs-2xl:    clamp(2rem,    1.6rem + 2vw, 3.5rem);
  --fs-3xl:    clamp(3rem,    2rem + 5vw, 6rem);
  --fs-mega:   clamp(4rem,    3rem + 8vw, 12rem);
  --fs-giant:  clamp(6rem,    4rem + 14vw, 22rem);

  /* ─── ESPACIADO ─── */
  --space-1:   0.5rem;
  --space-2:   1rem;
  --space-3:   1.5rem;
  --space-4:   2rem;
  --space-5:   3rem;
  --space-6:   4rem;
  --space-8:   6rem;
  --space-10:  8rem;
  --space-12:  12rem;

  /* ─── LAYOUT ─── */
  --container-padding: 4vw;
  --max-width:        1600px;
  --radius-sm:        4px;
  --radius-md:        12px;
  --radius-lg:        24px;

  /* ─── EASINGS (curvas creativas) ─── */
  --ease-osmo:    cubic-bezier(0.625, 0.05, 0, 1);
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0.05, 0.05, 0.99);

  /* ─── DURACIONES ─── */
  --dur-fast:    0.3s;
  --dur-base:    0.6s;
  --dur-slow:    1s;
  --dur-slower:  1.5s;

  /* ─── Z-INDEX SCALE ─── */
  --z-bg:       -1;
  --z-base:     0;
  --z-content:  10;
  --z-nav:      50;
  --z-cursor:   100;
  --z-overlay:  200;
  --z-loader:   1000;
}