/* ============================================================
   TOKENS.CSS — Design tokens TelematicGPS (Venezuela)
   Portado y adaptado del sistema de la versión Europa.
   PALETA CORPORATIVA OFICIAL (ficha técnica):
     #002B86 → Azul marino  (primary — texto/marca)
     #E76114 → Naranja       (accent — CTAs, triángulo del logo)
     #009CDE → Azul cielo     (secondary — conexión/wifi del logo)
   TIPOGRAFÍA:
     N-Gage        → SOLO wordmark/logo (self-host)
     Space Grotesk → display/títulos
     Plus Jakarta  → cuerpo/UI
   ============================================================ */

/* --- Wordmark corporativo (usar solo en el logo, nunca en párrafos) --- */
@font-face {
    font-family: 'N-Gage';
    src: url('../assets/fonts/N-Gage.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ===== Fondos (light-first, gris perlado cálido) ===== */
    --bg-page:      #F7F5F2;
    --bg-surface:   #FFFFFF;
    --bg-surface-2: #FCFAF7;
    --bg-elevated:  #F1EFE8;
    --bg-subtle:    #EDEAE3;

    /* ===== Texto ===== */
    --text-primary:    #1A1A1F;
    --text-secondary:  #5A5A68;
    --text-tertiary:   #8B8B96;
    --text-muted:      #A8A8B0;
    --text-on-accent:  #FFFFFF;
    --text-on-primary: #FFFFFF;

    /* ===== Bordes ===== */
    --border-subtle:  #EFECE6;
    --border-default: #E3DFD7;
    --border-strong:  #D4CFC4;
    --border-accent:  #E76114;

    /* ===== PRIMARY — Azul marino #002B86 ===== */
    --primary:           #002B86;
    --primary-hover:     #003DAE;
    --primary-active:    #001F63;
    --primary-dark:      #001444;
    --primary-light:     #2C54A6;
    --primary-bg-soft:   #EDF0F8;
    --primary-bg-lighter:#F5F7FB;
    --primary-border:    #B8C5E2;

    /* ===== ACCENT — Naranja #E76114 (CTAs, highlights) ===== */
    --accent:           #E76114;
    --accent-hover:     #FF7428;
    --accent-active:    #C44F0C;
    --accent-dark:      #9D3F09;
    --accent-light:     #F2823D;
    --accent-bg-soft:   #FEF1E9;
    --accent-bg-lighter:#FFF9F4;
    --accent-border:    #F8C89F;

    /* ===== SECONDARY — Cian #009CDE (detalles, iconos, info) ===== */
    --secondary:        #009CDE;
    --secondary-hover:  #0FB0F0;
    --secondary-active: #007AB0;
    --secondary-bg:     #E6F5FC;
    --secondary-border: #9FD4F2;

    /* ===== Estados semánticos ===== */
    --success: #0F7B4F;  --success-bg: #E3F5EC;  --success-border: #A8DDC0;
    --danger:  #D92D20;  --danger-bg:  #FEECEC;  --danger-border:  #F4B5B0;
    --warning: #B45309;  --warning-bg: #FEF6E7;  --warning-border: #F5D49E;
    --info:    #007AB0;  --info-bg:    #E6F5FC;  --info-border:    #9FD4F2;

    /* ===== Tipografía ===== */
    --font-wordmark: 'N-Gage', 'Space Grotesk', sans-serif;              /* SOLO logo */
    --font-display:  'Space Grotesk', 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-sans:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Arial, sans-serif;
    --font-mono:     'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace;

    --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.0625rem;
    --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem; --fs-5xl: 3rem; --fs-6xl: 3.75rem;

    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800;
    --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.5; --lh-relaxed: 1.625;
    --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: .05em;

    /* ===== Espaciado / radios ===== */
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;

    /* ===== Sombras (suaves, tinte corporativo) ===== */
    --shadow-xs: 0 1px 2px rgba(26,26,31,.04);
    --shadow-sm: 0 2px 4px rgba(26,26,31,.05), 0 1px 2px rgba(26,26,31,.03);
    --shadow-md: 0 4px 12px rgba(26,26,31,.06), 0 2px 4px rgba(26,26,31,.04);
    --shadow-lg: 0 10px 25px rgba(26,26,31,.07), 0 4px 10px rgba(26,26,31,.04);
    --shadow-xl: 0 20px 40px rgba(26,26,31,.08), 0 8px 16px rgba(26,26,31,.05);
    --shadow-accent-md:  0 4px 14px rgba(231,97,20,.25);
    --shadow-primary-md: 0 4px 14px rgba(0,43,134,.20);
    --shadow-focus:      0 0 0 3px rgba(231,97,20,.15);
    --shadow-focus-primary: 0 0 0 3px rgba(0,43,134,.15);

    /* ===== Transiciones ===== */
    --t-fast: 120ms cubic-bezier(.4,0,.2,1);
    --t-base: 180ms cubic-bezier(.4,0,.2,1);
    --t-slow: 280ms cubic-bezier(.4,0,.2,1);

    /* ===== Layout / z-index ===== */
    --container-xl: 1200px; --container-2xl: 1400px; --header-height: 72px;
    --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 500; --z-toast: 600; --z-tooltip: 700;

    /* ===== Gradientes corporativos ===== */
    --gradient-accent:  linear-gradient(135deg, #E76114 0%, #F2823D 100%);
    --gradient-primary: linear-gradient(135deg, #002B86 0%, #2C54A6 100%);
    --texture-corporate:
        radial-gradient(circle at 15% 20%, rgba(231,97,20,.035) 0%, transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(0,43,134,.025) 0%, transparent 50%),
        radial-gradient(circle at 50% 90%, rgba(0,156,222,.020) 0%, transparent 40%);
}

/* ============================================================
   DARK MODE — toggle con .dark en <html> (clave localStorage
   'telematicgps-theme'). Mantiene los colores corporativos y
   sube su luminosidad para contraste sobre fondo oscuro.
   ============================================================ */
:root.dark {
    --bg-page:      #0F1117;
    --bg-surface:   #171A22;
    --bg-surface-2: #1C2029;
    --bg-elevated:  #232733;
    --bg-subtle:    #1A1E27;

    --text-primary:   #F1F3F8;
    --text-secondary: #AEB4C2;
    --text-tertiary:  #7E8698;
    --text-muted:     #5F6676;

    --border-subtle:  #242833;
    --border-default: #2E333F;
    --border-strong:  #3A4150;

    /* Colores corporativos aclarados para contraste en oscuro */
    --primary:        #6E8BE0;   /* azul marino aclarado */
    --primary-hover:  #88A1EA;
    --primary-light:  #4E6FCB;
    --primary-bg-soft:#182036;

    --accent:         #FB7A34;   /* naranja aclarado */
    --accent-hover:   #FF8E52;
    --accent-bg-soft: #2A1A10;

    --secondary:      #38B6F0;   /* cian aclarado */
    --secondary-bg:   #0E2431;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
    --shadow-sm: 0 2px 4px rgba(0,0,0,.35);
    --shadow-md: 0 4px 12px rgba(0,0,0,.4);
    --shadow-lg: 0 10px 25px rgba(0,0,0,.45);
    --shadow-xl: 0 20px 40px rgba(0,0,0,.5);
}

/* ===== Responsive / accesibilidad ===== */
@media (max-width: 640px) {
    :root { --fs-5xl: 2.25rem; --fs-6xl: 2.75rem; --fs-4xl: 1.875rem; --header-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===== Selección de texto ===== */
::selection { background: var(--accent-bg-soft); color: var(--accent-dark); }