/* ==========================================================================
   ZAMA MOBILITY — Design Tokens
   Fuente única de verdad para color, tipografía, espacio, sombra y motion.
   No escribir valores "mágicos" en otros archivos: siempre usar var(--...).
   ========================================================================== */

:root {
  /* ---------- Marca (valores institucionales, NO modificar) ---------------- */
  --brand-azul-profundo: #0B2545; /* Primario  60% */
  --brand-blanco-lino:   #EEF4F8; /* Secundario 30% */
  --brand-naranja-zama:  #FF6B35; /* Acento     10% */
  --brand-azul-comp:     #134074; /* Complementario */

  /* ---------- Escala derivada del azul primario --------------------------- */
  --azul-900: #071729;
  --azul-800: #0B2545;
  --azul-700: #10315A;
  --azul-600: #134074;
  --azul-500: #1B5296;
  --azul-400: #3C74BC;
  --azul-300: #7FA3D4;
  --azul-200: #B9CDE6;
  --azul-100: #DCE7F3;

  /* ---------- Escala derivada del naranja acento -------------------------- */
  --naranja-700: #A8380F; /* texto naranja sobre fondo claro (AA 6.4:1)      */
  --naranja-600: #C24E16; /* texto naranja sobre fondo claro (AA 4.7:1)      */
  --naranja-500: #FF6B35; /* institucional: fondos, iconos, bordes, botones  */
  --naranja-400: #FF8A5E;
  --naranja-300: #FFAE8B;
  --naranja-100: #FFE7DC;

  /* ---------- Neutros de confort visual ----------------------------------- */
  /* Se evita #FFFFFF y #000000 puros: reducen fatiga ocular y halación.      */
  --lino-000: #F9FBFD;
  --lino-100: #EEF4F8;
  --lino-200: #E2EBF2;
  --lino-300: #CFDBE6;
  --gris-500: #5E7087; /* AA 4.89:1 sobre --lino-000 (texto auxiliar) */
  --gris-700: #3E4E63;

  /* ---------- Semáforo / estados ------------------------------------------ */
  --exito:  #1E7A55;
  --alerta: #B26A00;
  --error:  #B3261E;

  /* ---------- Tipografía --------------------------------------------------- */
  --fuente-titulo: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-texto:  "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --peso-light: 300;
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-black: 800;

  /* Escala fluida (clamp) — se adapta sola de móvil a desktop */
  --txt-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --txt-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --txt-base: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --txt-lg:   clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --txt-xl:   clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --txt-2xl:  clamp(1.6rem, 1.4rem + 1vw, 2.15rem);
  --txt-3xl:  clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --txt-4xl:  clamp(2.4rem, 1.8rem + 2.8vw, 4rem);

  --alto-linea-texto: 1.7;   /* holgado = menos fatiga en lecturas largas */
  --alto-linea-titulo: 1.14;
  --kerning-wide: 0.34em;    /* estilo "M O B I L I T Y" del manual        */

  /* ---------- Espacio (escala 4px) ---------------------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 2.5rem;   --e-8: 3rem;
  --e-9: 4rem;     --e-10: 5rem;    --e-11: 6.5rem;  --e-12: 8rem;

  --seccion-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --ancho-contenido: 1200px;
  --ancho-texto: 68ch;

  /* ---------- Radios, bordes, sombras ------------------------------------- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

  --sombra-1: 0 1px 2px rgba(7, 23, 41, .06), 0 2px 8px rgba(7, 23, 41, .05);
  --sombra-2: 0 4px 12px rgba(7, 23, 41, .08), 0 12px 28px rgba(7, 23, 41, .07);
  --sombra-3: 0 10px 24px rgba(7, 23, 41, .10), 0 24px 60px rgba(7, 23, 41, .12);
  --sombra-acento: 0 8px 24px rgba(255, 107, 53, .28);

  /* ---------- Motion ------------------------------------------------------- */
  --t-rapida: 140ms cubic-bezier(.4, 0, .2, 1);
  --t-media:  260ms cubic-bezier(.4, 0, .2, 1);
  --t-lenta:  520ms cubic-bezier(.16, 1, .3, 1);

  --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-flotante: 300; --z-modal: 400;
}

/* ==========================================================================
   TEMA CLARO (por defecto)
   ========================================================================== */
:root,
[data-tema="claro"] {
  color-scheme: light;

  --fondo:           var(--lino-000);
  --fondo-alt:       var(--lino-100);
  --superficie:      #FFFFFF;
  --superficie-alt:  var(--lino-100);
  --superficie-inv:  var(--azul-800);

  --texto:           #12243D;  /* no negro puro */
  --texto-suave:     var(--gris-700);
  --texto-tenue:     var(--gris-500);
  --texto-inv:       var(--lino-100);
  --texto-sobre-acento: var(--azul-900);

  --borde:           var(--lino-300);
  --borde-suave:     var(--lino-200);
  --borde-fuerte:    var(--azul-200);

  --acento:          var(--naranja-500);
  --acento-texto:    var(--naranja-600);  /* naranja legible sobre claro */
  --acento-suave:    var(--naranja-100);

  --enlace:          var(--azul-600);
  --enlace-hover:    var(--naranja-600);

  --header-fondo:    rgba(249, 251, 253, .86);
  --header-borde:    var(--lino-200);
  --logo-filtro:     none;
}

/* ==========================================================================
   TEMA OSCURO — mismo sistema, contrastes suavizados (anti-halación)
   ========================================================================== */
[data-tema="oscuro"] {
  color-scheme: dark;

  --fondo:           #071729;
  --fondo-alt:       #0B2038;
  --superficie:      #0E2743;
  --superficie-alt:  #123054;
  --superficie-inv:  var(--lino-100);

  --texto:           #DEE8F4;  /* no blanco puro */
  --texto-suave:     #AFC1D8;
  --texto-tenue:     #8296B0;
  --texto-inv:       var(--azul-900);
  --texto-sobre-acento: var(--azul-900);

  --borde:           #1D3A5E;
  --borde-suave:     #16304F;
  --borde-fuerte:    #2B5486;

  --acento:          var(--naranja-500);
  --acento-texto:    var(--naranja-400); /* AA sobre fondo oscuro */
  --acento-suave:    rgba(255, 107, 53, .14);

  --enlace:          #7FB2F0;
  --enlace-hover:    var(--naranja-400);

  --header-fondo:    rgba(7, 23, 41, .88);
  --header-borde:    #16304F;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .24);
  --sombra-2: 0 4px 12px rgba(0, 0, 0, .34), 0 12px 28px rgba(0, 0, 0, .3);
  --sombra-3: 0 10px 24px rgba(0, 0, 0, .4), 0 24px 60px rgba(0, 0, 0, .42);
}

/* Respeta la preferencia del sistema si el usuario no ha elegido tema */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #071729;          --fondo-alt: #0B2038;
    --superficie: #0E2743;     --superficie-alt: #123054;
    --superficie-inv: var(--lino-100);
    --texto: #DEE8F4;          --texto-suave: #AFC1D8;
    --texto-tenue: #8296B0;    --texto-inv: var(--azul-900);
    --borde: #1D3A5E;          --borde-suave: #16304F;
    --borde-fuerte: #2B5486;
    --acento-texto: var(--naranja-400);
    --acento-suave: rgba(255, 107, 53, .14);
    --enlace: #7FB2F0;         --enlace-hover: var(--naranja-400);
    --header-fondo: rgba(7, 23, 41, .88);
    --header-borde: #16304F;
  }
}