/* ══════════════════════════════════════
   FERRANOVA — Design Tokens
   Sistema de diseño Industrial Premium
   ══════════════════════════════════════ */

:root {
  /* ── Paleta Principal ── */
  --fn-primario:           #246f84;
  --fn-primario-hover:     #1d5a6c;
  --fn-primario-light:     #2d8ca5;
  --fn-primario-ultra-light: #e8f4f8;

  --fn-secundario:         #ff743d;
  --fn-secundario-hover:   #e5612e;
  --fn-secundario-light:   #ff8f62;

  --fn-acento:             #b84451;
  --fn-acento-hover:       #9e3943;
  --fn-acento-light:       #d4606d;

  /* ── Neutros ── */
  --fn-blanco:             #ffffff;
  --fn-fondo:              #f7f8fa;
  --fn-fondo-alt:          #eef1f5;
  --fn-gris-100:           #f1f3f5;
  --fn-gris-200:           #dee2e6;
  --fn-gris-300:           #ced4da;
  --fn-gris-400:           #adb5bd;
  --fn-gris-500:           #868e96;
  --fn-gris-600:           #495057;
  --fn-gris-700:           #343a40;
  --fn-gris-800:           #212529;
  --fn-gris-900:           #141517;
  --fn-negro:              #0d0e10;

  /* ── Texto ── */
  --fn-texto:              #1a1d21;
  --fn-texto-suave:        #5a6270;
  --fn-texto-muted:        #8c939d;
  --fn-texto-sobre-primario: #ffffff;
  --fn-texto-sobre-oscuro: #f0f2f4;

  /* ── Feedback ── */
  --fn-exito:              #2d9e5c;
  --fn-error:              #d64545;
  --fn-warning:            #e6a817;
  --fn-info:               #3a86c7;

  /* ── Bordes ── */
  --fn-borde:              #dde1e6;
  --fn-borde-hover:        #b8bfc7;

  /* ── Tipografía ── */
  --fn-fuente-titulo:      'Outfit', sans-serif;
  --fn-fuente-cuerpo:      'Inter', sans-serif;

  --fn-fs-xs:              clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --fn-fs-sm:              clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --fn-fs-base:            clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  --fn-fs-md:              clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --fn-fs-lg:              clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  --fn-fs-xl:              clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --fn-fs-2xl:             clamp(1.8rem, 1.4rem + 2vw, 3rem);
  --fn-fs-3xl:             clamp(2.2rem, 1.6rem + 3vw, 4rem);

  --fn-fw-regular:         400;
  --fn-fw-medium:          500;
  --fn-fw-semibold:        600;
  --fn-fw-bold:            700;
  --fn-fw-extrabold:       800;

  --fn-lh-tight:           1.2;
  --fn-lh-normal:          1.5;
  --fn-lh-relaxed:         1.7;

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

  /* ── Espaciados ── */
  --fn-sp-2xs:             4px;
  --fn-sp-xs:              8px;
  --fn-sp-sm:              12px;
  --fn-sp-md:              16px;
  --fn-sp-lg:              24px;
  --fn-sp-xl:              32px;
  --fn-sp-2xl:             48px;
  --fn-sp-3xl:             64px;
  --fn-sp-4xl:             96px;
  --fn-sp-5xl:             128px;

  /* ── Secciones ── */
  --fn-seccion-py:         clamp(3rem, 2rem + 5vw, 6rem);
  --fn-seccion-px:         clamp(1rem, 0.5rem + 3vw, 2rem);

  /* ── Contenedores ── */
  --fn-container-sm:       640px;
  --fn-container-md:       768px;
  --fn-container-lg:       1024px;
  --fn-container-xl:       1200px;
  --fn-container-2xl:      1400px;

  /* ── Radios ── */
  --fn-radio-xs:           2px;
  --fn-radio-sm:           4px;
  --fn-radio-md:           8px;
  --fn-radio-lg:           12px;
  --fn-radio-xl:           16px;
  --fn-radio-2xl:          24px;
  --fn-radio-full:         9999px;

  /* ── Sombras ── */
  --fn-sombra-xs:          0 1px 2px rgba(0,0,0,0.05);
  --fn-sombra-sm:          0 2px 4px rgba(0,0,0,0.06);
  --fn-sombra-md:          0 4px 12px rgba(0,0,0,0.08);
  --fn-sombra-lg:          0 8px 24px rgba(0,0,0,0.1);
  --fn-sombra-xl:          0 16px 48px rgba(0,0,0,0.12);
  --fn-sombra-hover:       0 8px 30px rgba(36,111,132,0.15);
  --fn-sombra-card:        0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);

  /* ── Transiciones ── */
  --fn-trans-fast:         150ms ease;
  --fn-trans-normal:       250ms ease;
  --fn-trans-slow:         400ms ease;
  --fn-trans-bounce:       400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ── */
  --fn-z-dropdown:         100;
  --fn-z-sticky:           200;
  --fn-z-overlay:          300;
  --fn-z-modal:            400;
  --fn-z-toast:            500;
  --fn-z-whatsapp:         600;

  /* ── Breakpoints (solo referencia, usar en @media) ── */
  /* Mobile:  480px */
  /* Tablet:  768px */
  /* Desktop: 1024px */
  /* Wide:    1200px */
  /* Ultra:   1400px */

  /* ── Header ── */
  --fn-header-height:      80px;
  --fn-header-height-scrolled: 64px;
}