/* ============================================================
   Aduanas Flex — Design Tokens (MD3)
   Fuente de verdad para todos los colores, radios, sombras
   y dimensiones de layout de la aplicación.
   Cargado último en stylesApp.html — define :root globalmente.
   ============================================================ */

:root {

    /* ── PRIMARY (Google Blue) ─────────────────────────────── */
    --primary:           #1a73e8;
    --primary-dark:      #1557b0;
    --primary-light:     #4285f4;
    --primary-surface:   #e8f0fe;
    --primary-hover:     #d2e3fc;

    /* ── NEUTRALES (Material Design 3) ────────────────────── */
    --surface:            #ffffff;
    --surface-dim:        #f8f9fa;
    --surface-container:  #f1f3f4;
    --surface-variant:    #e8eaed;
    --on-surface:         #202124;
    --on-surface-variant: #5f6368;
    --outline:            #dadce0;
    --outline-variant:    #e8eaed;

    /* ── SEMÁNTICOS ─────────────────────────────────────────── */
    --success:          #34a853;
    --success-surface:  #e6f4ea;
    --warning:          #f9ab00;
    --warning-surface:  #fef7e0;
    --error:            #ea4335;
    --error-surface:    #fce8e6;
    --info:             #4285f4;
    --info-surface:     #e8f0fe;

    /* ── LAYOUT ─────────────────────────────────────────────── */
    --nav-w:     272px;
    --topbar-h:   56px;

    /* ── BORDER RADIUS ──────────────────────────────────────── */
    --radius-xs:   8px;
    --radius-sm:  12px;
    --radius-md:  16px;
    --radius-lg:  28px;
    --radius-full: 9999px;

    /* ── ELEVATION (sombras sutiles) ────────────────────────── */
    --elevation-1: 0 1px 2px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    --elevation-2: 0 1px 3px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);

    /* ── ALIAS LEGACY (compatibilidad con componentes existentes) */
    --primary-color:  var(--primary);
    --bg-light:       var(--surface-dim);
    --text-muted:     var(--on-surface-variant);
    --border-color:   var(--outline);
    --shadow-sm:      var(--elevation-1);
    --shadow-md:      var(--elevation-2);
    --transition:     all 0.2s ease;

    /* ── ALIAS DASHBOARD LEGACY ─────────────────────────────── */
    --hd-bg:          var(--surface-dim);
    --hd-card-bg:     var(--surface);
    --hd-card-border: var(--outline);
    --hd-card-radius: var(--radius-sm);
    --hd-kpi-size:    32px;
    --hd-kpi-weight:  500;
}

/* ── DARK MODE TOKENS ──────────────────────────────────────── */
[data-theme="dark"] {
    --surface:            #292a2d;
    --surface-dim:        #1e1e1f;
    --surface-container:  #3c4043;
    --surface-variant:    #3c4043;
    --on-surface:         #e8eaed;
    --on-surface-variant: #9aa0a6;
    --outline:            #3c4043;
    --outline-variant:    #3c4043;
    --primary:            #8ab4f8;
    --primary-dark:       #a8c7fa;
    --primary-surface:    #1e3a5f;
    --primary-hover:      #253f6b;
    --error-surface:      #4e1f1a;
    --success-surface:    #1a3d24;
    --warning-surface:    #3d2e00;
    --info-surface:       #1e3a5f;
}