:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --j-bg: #08111c;
    --j-bg-soft: #0b1623;
    --j-surface: #0f1b2a;
    --j-surface-2: #142338;
    --j-surface-3: #1a2b43;
    --j-surface-hover: #1d304a;
    --j-border: #243d5d;
    --j-border-soft: rgba(255,255,255,.08);
    --j-text: #e9f0f8;
    --j-text-muted: #8fa5bd;
    --j-text-soft: #b5c3d1;
    --j-primary: #2f8cff;
    --j-primary-soft: rgba(47,140,255,.18);
    --j-success: #37d67a;
    --j-warning: #f6b73c;
    --j-danger: #ff6577;
    --j-overlay: rgba(2,8,14,.68);
    --j-input: #0b1622;
    --j-header-start: #0f1b2a;
    --j-header-end: #142338;
    --j-shadow: 0 18px 50px rgba(0,0,0,.28);
    --j-shadow-heavy: 0 28px 80px rgba(0,0,0,.42);
    --j-radius-sm: 8px;
    --j-radius-md: 12px;
    --j-radius-lg: 18px;
    --j-space-1: 4px;
    --j-space-2: 8px;
    --j-space-3: 12px;
    --j-space-4: 16px;
    --j-space-5: 24px;
    --j-space-6: 32px;
    --j-header-height: 64px;
    --j-sidebar-width: 276px;
    --j-sidebar-collapsed-width: 76px;
    --j-transition-fast: 140ms cubic-bezier(.2,.8,.2,1);
    --j-transition: 190ms cubic-bezier(.2,.8,.2,1);
    --j-transition-slow: 260ms cubic-bezier(.2,.8,.2,1);
    --j-glass: color-mix(in srgb,var(--j-surface) 86%,transparent);
}

html[data-theme="light"] {
    color-scheme: light;
    --j-bg: #f3f6f9;
    --j-bg-soft: #edf2f7;
    --j-surface: #ffffff;
    --j-surface-2: #f5f8fb;
    --j-surface-3: #eaf0f6;
    --j-surface-hover: #e5edf6;
    --j-border: #d3dee9;
    --j-border-soft: rgba(25,52,76,.10);
    --j-text: #203244;
    --j-text-muted: #667b8f;
    --j-text-soft: #455d72;
    --j-primary: #2178d4;
    --j-primary-soft: rgba(33,120,212,.12);
    --j-success: #228654;
    --j-warning: #b87700;
    --j-danger: #d94454;
    --j-overlay: rgba(31,48,64,.35);
    --j-input: #ffffff;
    --j-header-start: #ffffff;
    --j-header-end: #f4f8fb;
    --j-shadow: 0 14px 38px rgba(37,59,80,.12);
    --j-shadow-heavy: 0 24px 68px rgba(37,59,80,.18);
}


/* ========================================================================
   ACENTO DE NAVEGACIÓN GLOBAL
   La paleta elegida en el Panel Modular puede ser consumida por cualquier
   componente reutilizable que cargue tokens.css.
   ======================================================================== */
html[data-nav-accent="blue"] {
    --j-nav-accent: #2f8cff;
    --j-nav-accent-light: #67b1ff;
    --j-nav-accent-soft: color-mix(in srgb, #2f8cff 14%, transparent);
}
html[data-nav-accent="violet"] {
    --j-nav-accent: #D13FD1;
    --j-nav-accent-light: #F06BEF;
    --j-nav-accent-soft: color-mix(in srgb, #D13FD1 14%, transparent);
}
html[data-nav-accent="rubi"] {
    --j-nav-accent: #D81B60;
    --j-nav-accent-light: #ec508a;
    --j-nav-accent-soft: color-mix(in srgb, #D81B60 14%, transparent);
}
html[data-nav-accent="green"] {
    --j-nav-accent: #22B978;
    --j-nav-accent-light: #4DDB9A;
    --j-nav-accent-soft: color-mix(in srgb, #22B978 14%, transparent);
}