/* ==========================================================================
   RAHAZO · Autotransporte de carga alto tonelaje
   tokens.css · Design tokens (fuente unica de verdad)
   OSTP · @echoShift · v1.1 (2026-10-05)
   --------------------------------------------------------------------------
   Orden de carga: tokens > base > layout > components > sections > pages
   Proporcion de color: 60 fondo oscuro · 25 blanco/acero · 10 rojo · 5 acentos
   ========================================================================== */

:root {
  /* --- PRIMARIOS · MARCA --- */
  --rojo-rahazo: #B41525;        /* rgb(180, 21, 37)   - Marca, botones, titulares */
  --rojo-profundo: #860F1B;      /* rgb(134, 15, 27)   - Hover, bandas, fondos */
  --rojo-senal: #EC5560;         /* rgb(236, 85, 96)   - Acento rojo sobre negro */

  /* --- BASE · NEUTROS --- */
  --negro-asfalto: #111214;      /* rgb(17, 18, 20)    - Fondo principal */
  --gris-carbon: #24282D;        /* rgb(36, 40, 45)    - Tarjetas, superficies */
  --acero: #94989F;              /* rgb(148, 152, 159) - Bordes, texto secundario */
  --blanco-hueso: #F5F3EF;       /* rgb(245, 243, 239) - Texto, fondos claros */

  /* --- SECUNDARIOS · OPERACION --- */
  --azul-carretera: #173A6A;     /* rgb(23, 58, 106)   - Corporativo, confianza */
  --azul-senal: #5B9BEA;         /* rgb(91, 155, 234)  - Enlaces sobre oscuro */
  --amarillo-seguridad: #F5B700; /* rgb(245, 183, 0)   - CTA de cotizacion, alertas */
  --naranja-senal: #F06A1A;      /* rgb(240, 106, 26)  - Estado "en ruta", avisos */

  /* --- DERIVADOS (no agregar colores nuevos fuera de esta lista) --- */
  --negro-profundo: #0B0C0D;     /* topbar, footer */
  --carbon-alto: #2E3338;        /* hover de superficies */
  --linea: #3A3F46;              /* bordes y divisores */
  --whatsapp: #25D366;           /* solo boton de WhatsApp */
  --exito: #3FB27F;              /* validacion correcta */

  /* --- ROLES SEMANTICOS (usar estos en componentes) --- */
  --bg: var(--negro-asfalto);
  --bg-deep: var(--negro-profundo);
  --surface: var(--gris-carbon);
  --surface-hover: var(--carbon-alto);
  --text: var(--blanco-hueso);
  --text-muted: var(--acero);
  --border: var(--linea);
  --brand: var(--rojo-rahazo);
  --brand-hover: var(--rojo-profundo);
  --brand-on-dark: var(--rojo-senal);
  --on-brand: var(--blanco-hueso);    /* contraste 6.2:1 */
  --cta: var(--amarillo-seguridad);
  --cta-hover: #FFC627;
  --on-cta: var(--negro-asfalto);     /* contraste 10.4:1 */
  --link: var(--azul-senal);
  --corporate: var(--azul-carretera);
  --warning: var(--naranja-senal);
  --success: var(--exito);
  --error: var(--rojo-senal);
  --focus: var(--amarillo-seguridad);

  /* --- TIPOGRAFIA --- */
  --font-heading: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.75rem;                              /* 12 */
  --fs-sm: 0.875rem;                             /* 14 */
  --fs-base: 1rem;                               /* 16 */
  --fs-md: 1.125rem;                             /* 18 */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --fs-display: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);

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

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-base: 1.6;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* --- ESPACIADO (escala 4px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* --- CONTENEDORES --- */
  --container: 1240px;
  --container-narrow: 820px;
  --container-wide: 1440px;

  /* --- FORMA --- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border-w: 1px;

  /* --- PROFUNDIDAD --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
  --shadow-brand: 0 10px 30px rgba(180, 21, 37, 0.35);
  --shadow-cta: 0 10px 30px rgba(245, 183, 0, 0.25);

  /* --- MOVIMIENTO --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 280ms;
  --dur-slow: 700ms;

  /* --- CAPAS --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-header: 500;
  --z-drawer: 600;
  --z-float: 700;
  --z-toast: 800;

  /* --- ALTURAS DE CABECERA (usadas por scroll-margin y hero) --- */
  --topbar-h: 40px;
  --header-h: 76px;

  /* Breakpoints (solo referencia, CSS no permite vars en @media):
     sm 600px · md 900px · lg 1200px */

  color-scheme: dark;
}