/* ==================================================================
   Machala GPS — Design Tokens
   Sistema de diseño: Claymorphism premium sobre marca azul/blanco/amarillo.
   Reglas del sistema:
   - Botones e interactivos: radio píldora (999px).
   - Tarjetas y paneles: radio 16-20px.
   - Sombras "clay": sombra exterior suave + luz interior superior.
   - El amarillo se reserva para el CTA y acentos importantes.
   ================================================================== */

:root {

    /* ---------- Tipografía ---------- */
    --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---------- Color: marca ---------- */
    --c-navy:        #0c1b3f;   /* tinta principal (titulares, texto fuerte) */
    --c-blue-800:    #14306e;
    --c-blue-600:    #1e4fcc;   /* azul corporativo primario */
    --c-blue-500:    #2e62e8;
    --c-blue-100:    #dde8fa;
    --c-yellow-400:  #ffc53d;   /* amarillo corporativo (solo acentos/CTA) */
    --c-yellow-300:  #ffd166;

    /* ---------- Color: superficies y texto (tema claro) ---------- */
    --c-bg:          #eef3fa;   /* fondo general, neutro frío con matiz azul */
    --c-surface:     #ffffff;
    --c-text:        #3d4c6e;   /* cuerpo: 4.5:1+ sobre --c-bg */
    --c-text-soft:   #5b6a8c;

    /* ---------- Color: footer (navy profundo) ---------- */
    --c-footer-bg:     #0a1531;
    --c-footer-card:   #12224b;
    --c-footer-text:   #a9b8da;
    --c-footer-muted:  #8496bf;

    /* ---------- Sombras clay ---------- */
    --shadow-clay-sm:
        0 2px 6px rgba(16, 42, 102, 0.08),
        0 8px 20px rgba(16, 42, 102, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    --shadow-clay:
        0 3px 8px rgba(16, 42, 102, 0.07),
        0 16px 36px rgba(16, 42, 102, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.95),
        inset 0 -3px 6px rgba(16, 42, 102, 0.05);

    --shadow-clay-yellow:
        0 6px 16px rgba(222, 156, 10, 0.32),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
        inset 0 -3px 6px rgba(160, 110, 0, 0.18);

    --shadow-clay-dark:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.09),
        inset 0 -4px 10px rgba(0, 0, 0, 0.25),
        0 12px 28px rgba(4, 10, 26, 0.35);

    /* ---------- Radios ---------- */
    --radius-sm:   12px;
    --radius-md:   16px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    /* ---------- Movimiento ---------- */
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-fast:    160ms;
    --dur-base:    220ms;
    --dur-slow:    340ms;

    /* ---------- Capas (z-index semántico) ---------- */
    --z-scroll-top: 60;
    --z-header:     100;
    --z-overlay:    200;
    --z-drawer:     210;

    /* ---------- Layout ---------- */
    --container-max: 76rem;
    --container-pad: clamp(1.25rem, 4vw, 2.5rem);
    --header-height: 4.75rem;
    --header-height-mobile: 4rem;
    /* Separación del header flotante respecto a los bordes del viewport */
    --header-gap: clamp(0.6rem, 1.5vw, 0.9rem);
}