/*
 * V2GO — Design Tokens
 * Variables globales de diseño. Importar antes de cualquier CSS de sección.
 * Dirección estética: Industrial Premium — navy authority + amber energy
 */

:root {

  /* ─── COLORES MARCA ──────────────────────────────── */
  --v2go-navy:          #1B3240;   /* Pantone 7546C — primario */
  --v2go-navy-deep:     #111F2A;   /* navy más oscuro para fondos hero */
  --v2go-navy-mid:      #243F52;   /* navy medio para capas */
  --v2go-navy-light:    #2E5269;   /* navy claro para hover states */

  --v2go-amber:         #F7AE1F;   /* Pantone 7409C — acento energía */
  --v2go-amber-hover:   #E6A524;   /* Pantone 124C — hover/dark variant */
  --v2go-amber-soft:    rgba(247, 174, 31, 0.12); /* fondo suave */
  --v2go-amber-border:  rgba(247, 174, 31, 0.30);

  /* ─── NEUTROS ────────────────────────────────────── */
  --v2go-white:         #FFFFFF;
  --v2go-cream:         #F7F5F0;   /* off-white cálido — secciones alternas */
  --v2go-gray-100:      #F0EFEB;
  --v2go-gray-200:      #E2E0DA;
  --v2go-gray-400:      #A8A79F;
  --v2go-gray-600:      #6B6B63;
  --v2go-text:          #0D1C25;   /* casi negro para cuerpo */
  --v2go-text-muted:    #5A6A74;

  /* ─── ESTADOS ────────────────────────────────────── */
  --v2go-success:       #1E7D4F;
  --v2go-error:         #C0392B;
  --v2go-warning:       #E67E22;

  /* ─── TIPOGRAFÍA ─────────────────────────────────── */
  --font-display:       'Geomanist', 'DM Sans', sans-serif;
  --font-body:          'Geomanist', 'DM Sans', sans-serif;

  /* Escala modular (base 16px, ratio 1.25) */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.25rem;    /*  20px */
  --text-xl:    1.5rem;     /*  24px */
  --text-2xl:   2rem;       /*  32px */
  --text-3xl:   2.5rem;     /*  40px */
  --text-4xl:   3.25rem;    /*  52px */
  --text-5xl:   4.25rem;    /*  68px */
  --text-6xl:   5.5rem;     /*  88px */

  /* Pesos */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.15em;

  /* ─── ESPACIADO ──────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40: 10rem;      /* 160px */

  /* Sección padding vertical */
  --section-py:       var(--space-24);
  --section-py-lg:    var(--space-32);

  /* ─── LAYOUT ─────────────────────────────────────── */
  --container-max:     1280px;
  --container-narrow:  780px;
  --container-wide:    1440px;
  --container-px:      var(--space-6);

  /* ─── BORDER RADIUS ──────────────────────────────── */
  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-full:   9999px;

  /* ─── SOMBRAS ────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(11, 24, 34, 0.10), 0 1px 2px rgba(11, 24, 34, 0.06);
  --shadow-md:  0 4px 16px rgba(11, 24, 34, 0.12), 0 2px 6px rgba(11, 24, 34, 0.08);
  --shadow-lg:  0 12px 32px rgba(11, 24, 34, 0.15), 0 4px 12px rgba(11, 24, 34, 0.10);
  --shadow-amber: 0 8px 24px rgba(247, 174, 31, 0.25);

  /* ─── MOTION ─────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 280ms;
  --duration-slow:   480ms;

  /* ─── BORDES ─────────────────────────────────────── */
  --border-thin:   1px solid var(--v2go-gray-200);
  --border-medium: 2px solid var(--v2go-gray-200);
  --border-accent: 2px solid var(--v2go-amber);
  --border-navy:   1px solid rgba(27, 50, 64, 0.15);
}