/* ============================================================
   senalamientosviales.mx — tokens.css
   Dirección B «Ciruela». Todas las variables llevan el prefijo --svm-.
   Reglas:
   · Los colores de tipo de señal (--svm-tipo-*) NO son colores de marca:
     solo se usan junto al texto de su tipo y en el pictograma.
   · El acento (--svm-accent) solo marca lo que se puede tocar: Cotizar,
     enlaces, foco y la página actual del menú. Única excepción: la línea
     superior del encabezado.
   · Los tokens semánticos (aviso, a cotizar, envío) no usan amarillo,
     naranja ni rojo. Hoy apuntan a la familia neutra; si un día cambian,
     se cambia aquí y no en componentes.css.
   ============================================================ */

:root {
  /* ---------- Neutros (gris con un grado de violeta) ---------- */
  --svm-bg:           #ffffff;  /* fondo de página */
  --svm-bg-2:         #f5f4f8;  /* bandas de sección, cabecera de tabla, aviso */
  --svm-surface:      #ffffff;  /* tarjetas, tablas, fondo de foto */
  --svm-line:         #d9d6e0;  /* bordes decorativos (1.4:1, no portan información) */
  --svm-line-strong:  #8a839e;  /* bordes de controles y chips: 3.6:1 sobre blanco */
  --svm-ink:          #1c1826;  /* texto principal: 17.4:1 sobre blanco, 15.9:1 sobre bg-2 */
  --svm-ink-2:        #4e4860;  /* texto secundario: 8.7:1 sobre blanco, 7.9:1 sobre bg-2 */
  --svm-ink-3:        #6b6480;  /* etiquetas, claves, notas: 5.6:1 sobre blanco, 5.1:1 sobre bg-2 */

  /* ---------- Acento: solo en lo que se toca ---------- */
  --svm-accent:        #5a3a9c;  /* Cotizar, enlaces, foco, página actual: 8.3:1 sobre blanco */
  --svm-accent-hover:  #46297f;  /* 11.2:1 con texto blanco */
  --svm-on-accent:     #ffffff;
  --svm-accent-soft:   #ede8f7;  /* fondo de la página actual del menú; texto --svm-ink encima: 14.5:1 */
  --svm-link:          var(--svm-accent);
  --svm-link-hover:    var(--svm-accent-hover);
  --svm-focus:         var(--svm-accent);

  /* ---------- Banda oscura (solo el bloque de cotización) ---------- */
  --svm-dark:          #241c38;  /* fondo de la banda; de la familia ciruela, no es #212121 */
  --svm-dark-2:        #332a4a;  /* superficie dentro de la banda */
  --svm-on-dark:       #ffffff;  /* texto sobre la banda: 16.2:1 */
  --svm-on-dark-2:     #cfc7e0;  /* texto secundario sobre la banda: 9.9:1 */
  --svm-line-on-dark:  #8f84ad;  /* bordes sobre la banda: 4.7:1 */
  --svm-focus-on-dark: #ffffff;  /* anillo de foco sobre la banda */

  /* ---------- Semánticos (sin amarillo, naranja ni rojo) ---------- */
  --svm-aviso-bg:      var(--svm-bg-2);        /* aviso de envío y disponibilidad */
  --svm-aviso-line:    var(--svm-line-strong);
  --svm-aviso-ink:     var(--svm-ink);
  --svm-cotizar-bg:    var(--svm-surface);     /* estado «a cotizar» (no hay precio) */
  --svm-cotizar-line:  var(--svm-line-strong);
  --svm-cotizar-ink:   var(--svm-ink-2);
  --svm-envio-bg:      var(--svm-bg-2);        /* «envío a toda la República» */
  --svm-envio-ink:     var(--svm-ink);

  /* ---------- Tipos de señal: solo junto a su texto y en el pictograma ---------- */
  --svm-tipo-preventiva:  #f7c600;  /* amarillo; texto --svm-tipo-ink encima: 11.7:1 */
  --svm-tipo-restrictiva: #b8141f;  /* rojo; como texto sobre blanco: 6.7:1 */
  --svm-tipo-informativa: #0e5aa7;  /* azul; texto blanco encima: 6.9:1 */
  --svm-tipo-obra:        #f08a24;  /* naranja; texto --svm-tipo-ink encima: 7.5:1 */
  --svm-tipo-destino:     #0b6e3f;  /* verde de las informativas de destino; solo en el pictograma de la guía (16) */
  --svm-tipo-ink:         #111111;
  --svm-tipo-blanco:      #ffffff;

  /* ---------- Tipografía: fuentes del sistema, 0 KB ---------- */
  /* Condensada para títulos, etiquetas y botones: Bahnschrift (Windows 10/11),
     Avenir Next Condensed (iPhone, iPad, Mac). Android y Linux caen a la sans
     del sistema (Roboto), más ancha: la escala está probada con ella. */
  --svm-font-display: Bahnschrift, "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --svm-font:         system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --svm-font-mono:    ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --svm-peso-normal:  400;
  --svm-peso-medio:   600;
  --svm-peso-negrita: 700;

  /* Escala para celular (360–414 px) */
  --svm-h1:       28px;  --svm-h1-lh:    1.15;
  --svm-h2:       22px;  --svm-h2-lh:    1.2;
  --svm-h3:       18px;  --svm-h3-lh:    1.25;
  --svm-text:     15px;  --svm-text-lh:  1.5;
  --svm-small:    13px;  --svm-small-lh: 1.4;
  --svm-label:    12px;  --svm-label-lh: 1.3;
  --svm-label-tracking: 0.06em;

  /* ---------- Espacios ---------- */
  --svm-space-1:  4px;
  --svm-space-2:  8px;
  --svm-space-3:  12px;
  --svm-space-4:  16px;
  --svm-space-5:  24px;
  --svm-space-6:  32px;
  --svm-space-7:  48px;
  --svm-space-8:  64px;
  --svm-gap:      var(--svm-space-3);   /* separación entre tarjetas */
  --svm-pad:      var(--svm-space-4);   /* margen lateral de la página */
  --svm-max:      1280px;               /* ancho máximo del contenido */

  /* ---------- Radios y bordes ---------- */
  --svm-radius:        2px;   /* chips, botones, tarjetas */
  --svm-radius-lg:     4px;   /* bloques grandes */
  --svm-border:        1px;
  --svm-border-strong: 2px;   /* subrayado de página actual, borde de foto en tarjeta de obra */
  --svm-focus-ring:    2px;
  --svm-focus-offset:  2px;
  --svm-tap:           44px;  /* alto mínimo de lo que se toca */
}

/* Escala para escritorio (1280–1440 px) */
@media (min-width: 1024px) {
  :root {
    --svm-h1:    40px;
    --svm-h2:    30px;
    --svm-h3:    22px;
    --svm-text:  16px;
    --svm-small: 14px;
    --svm-label: 13px;
    --svm-gap:   var(--svm-space-4);
    --svm-pad:   var(--svm-space-5);
  }
}