/* ═══════════════════════════════════════════════════════════════
   MOGROGRAF — Design Tokens
   Sistema de variables CSS para mograf.com
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─── PALETA PRINCIPAL ─── */
  --color-red:           #E1212A;
  --color-red-hover:     #C91B23;
  --color-red-light:     #F04A52;
  --color-red-bg:        rgba(225, 33, 42, 0.08);

  --color-black:         #0A0A0A;
  --color-white:         #FAFAF7;

  --color-gray-900:      #1A1A1A;
  --color-gray-800:      #3A3A3A;
  --color-gray-600:      #6E6E6E;
  --color-gray-400:      #B8B8B8;
  --color-gray-200:      #E0E0E0;
  --color-gray-100:      #F2F2F2;

  /* ─── COLORES SEMÁNTICOS ─── */
  --color-bg:            var(--color-white);
  --color-text:          var(--color-black);
  --color-text-muted:    var(--color-gray-600);

  --color-bg-dark:       var(--color-black);
  --color-text-on-dark:  var(--color-white);
  --color-text-muted-on-dark: var(--color-gray-400);

  --color-accent:        var(--color-red);
  --color-accent-hover:  var(--color-red-hover);

  --color-border:        var(--color-gray-200);
  --color-border-dark:   var(--color-gray-800);

  /* ─── TIPOGRAFÍA ─── */
  --font-display:  'Inter Tight', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;

  --fs-xs:    clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --fs-sm:    clamp(0.875rem, 0.83rem + 0.25vw, 1rem);
  --fs-base:  clamp(1rem,     0.95rem + 0.3vw,  1.125rem);
  --fs-md:    clamp(1.125rem, 1rem    + 0.5vw,  1.375rem);
  --fs-lg:    clamp(1.375rem, 1.1rem  + 1vw,    1.75rem);
  --fs-xl:    clamp(1.75rem,  1.3rem  + 1.5vw,  2.5rem);
  --fs-2xl:   clamp(2.25rem,  1.5rem  + 2.5vw,  3.5rem);
  --fs-3xl:   clamp(3rem,     2rem    + 3.5vw,  5rem);

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  --lh-tight:     1.1;
  --lh-snug:      1.3;
  --lh-normal:    1.6;

  --ls-tight:    -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.05em;
  --ls-caps:      0.1em;

  /* ─── ESPACIADO ─── */
  --space-xs:   clamp(0.25rem, 0.2rem  + 0.25vw, 0.5rem);
  --space-sm:   clamp(0.5rem,  0.4rem  + 0.5vw,  0.75rem);
  --space-md:   clamp(1rem,    0.8rem  + 0.75vw, 1.5rem);
  --space-lg:   clamp(1.5rem,  1rem    + 1.5vw,  2.5rem);
  --space-xl:   clamp(2rem,    1.5rem  + 2vw,    4rem);
  --space-2xl:  clamp(3rem,    2rem    + 3vw,    6rem);
  --space-3xl:  clamp(4rem,    3rem    + 4vw,    8rem);

  /* ─── SOMBRAS ─── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 16px 50px rgba(0, 0, 0, 0.16);
  --shadow-red:   0 4px 20px rgba(225, 33, 42, 0.35);

  /* ─── BORDES Y RADIUS ─── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-full:  9999px;

  /* ─── TRANSICIONES ─── */
  --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:  cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;

  --transition-base:  all var(--duration-base) var(--ease-out);
  --transition-fast:  all var(--duration-fast) var(--ease-out);
  --transition-slow:  all var(--duration-slow) var(--ease-in-out);

  /* ─── Z-INDEX ─── */
  --z-behind:    -1;
  --z-base:       0;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-max:        999;

  /* ─── CONTENEDORES ─── */
  --container-max:     1280px;
  --container-narrow:  800px;
  --container-padding: clamp(1rem, 4vw, 2rem);
}