/* ==========================================================================
   LATECCSA DESIGN SYSTEM — TOKENS (tokens.css)  · v0.1
   Laboratorio Técnico de Control de Calidad Suelos y Asfaltos
   Dirección A "Precision Laboratory Blue", depurada:
   tinta navy sobre papel/concreto, azul del logo como acento, sin glows.
   Reutilizable en todas las páginas futuras.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- COLOR */
  /* Marca (extraídos del logo y del sello ema) */
  --brand-blue: #01a0fe;                         /* azul del logotipo */
  --brand-ema: #06623d;                          /* verde oficial ema */

  /* Tinta (texto y superficies oscuras) */
  --color-ink: oklch(0.18 0.03 245);             /* #0b1320 */
  --color-ink-2: oklch(0.38 0.025 250);          /* texto secundario, AA sobre papel */
  --color-ink-3: oklch(0.50 0.02 250);           /* metadatos, captions, AA ≥ 4.5 */
  --color-navy-surface: oklch(0.24 0.03 245);    /* #131e2e */

  /* Papel / concreto (fondos claros, ligeramente cálidos) */
  --color-paper: oklch(0.965 0.004 90);          /* fondo principal */
  --color-paper-2: oklch(0.93 0.006 90);         /* banda alterna */
  --color-rule: oklch(0.84 0.008 90);            /* líneas y divisores */
  --color-white: oklch(1 0 0);

  /* Azul funcional */
  --color-blue: var(--brand-blue);               /* SOLO acentos no textuales (rayas, subrayado activo) */
  --color-blue-ink: oklch(0.48 0.14 245);        /* links y hover sobre claro (AA) */

  /* Estado */
  --color-success: oklch(0.52 0.13 153);
  --color-error: oklch(0.52 0.19 27);
  --color-whatsapp: #25d366;
  --color-whatsapp-ink: #128c4a;                 /* icono WA sobre claro (AA en gráficos) */

  /* Sobre oscuro (footer / bandas navy) */
  --color-on-dark: oklch(0.86 0.01 250);
  --color-on-dark-muted: oklch(0.70 0.015 250);
  --color-rule-dark: oklch(1 0 0 / 0.14);

  /* ----------------------------------------------------------- TYPOGRAPHY */
  /* Archivo (ancho variable 62–125): el ancho expandido hace eco del logotipo.
     IBM Plex Sans/Mono: lectura técnica, tono de documento de ingeniería. */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --stretch-display: 118%;   /* títulos grandes */
  --stretch-heading: 110%;   /* H2/H3 */

  --text-xs: 0.8125rem;                                   /* 13 */
  --text-sm: 0.875rem;                                    /* 14 */
  --text-base: 1rem;                                      /* 16 */
  --text-md: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17–19 */
  --text-lg: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);    /* 24–34 */
  --text-xl: clamp(1.875rem, 1.2rem + 2.3vw, 3.125rem);   /* 30–50 */
  --text-hero: clamp(2.375rem, 1.3rem + 3.6vw, 4.25rem);  /* 38–68 */

  --leading-tight: 1.02;
  --leading-heading: 1.1;
  --leading-body: 1.6;

  /* -------------------------------------------------------------- SPACING */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(4rem, 8vw, 7.5rem);

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* --------------------------------------------------------------- RADIUS */
  /* Industrial: esquinas casi rectas */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-full: 9999px;

  /* -------------------------------------------------------------- SHADOWS */
  /* Sin glows. Sólo una sombra funcional para elementos flotantes. */
  --shadow-float: 0 2px 10px rgb(11 19 32 / 0.18);

  /* --------------------------------------------------------------- MOTION */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}