/**
 * Design System — tokens (lote shell + login)
 * Claro / oscuro: body.light-theme | body.dark-theme
 * Reutilizar en pantallas nuevas; no hardcodear colores en vistas.
 */

:root,
body.light-theme {
    --ds-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ds-font-size: 14px;
    --ds-line-height: 1.45;

    --ds-bg: #f6f9fc;
    --ds-bg-accent: #eef2ff;
    --ds-surface: #ffffff;
    --ds-surface-2: #f8fafc;
    --ds-text: #0a2540;
    --ds-text-muted: #697386;
    --ds-border: #e3e8ee;
    --ds-border-strong: #c1c9d2;
    --ds-border-subtle: rgba(15, 23, 42, 0.06);

    --ds-primary: #635bff;
    --ds-primary-hover: #5851e6;
    --ds-primary-soft: #eeedfe;

    --ds-danger: #df1b41;
    --ds-danger-bg: #fde8ec;
    --ds-warning: #c44d00;
    --ds-warning-bg: #fff4e5;
    --ds-success: #0d9488;
    --ds-success-bg: #e6f7f4;

    --ds-radius-sm: 6px;
    --ds-radius: 8px;
    --ds-radius-lg: 12px;
    --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ds-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    --ds-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
    --ds-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);

    --ds-control-h: 44px;
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 32px;
    --ds-space-7: 40px;
    --ds-space-8: 48px;

    --ds-sidebar-w: 260px;
    --ds-sidebar-collapsed: 64px;
    --ds-topbar-h: 56px;
    --ds-sidebar-bg: #ffffff;
    --ds-sidebar-text: #0a2540;
    --ds-sidebar-hover: #f6f9fc;
    --ds-sidebar-active: #eeedfe;
    --ds-topbar-bg: #ffffff;
    --ds-topbar-text: #0a2540;

    --ds-login-wave: linear-gradient(160deg, #f6f9fc 0%, #f8fafc 55%, #eef2ff 100%);
    --ds-blob-1: #a5b4fc;
    --ds-blob-2: #f9a8d4;
    --ds-blob-3: #7dd3fc;
    --ds-blob-4: #c4b5fd;
}

body.dark-theme {
    /* Neutrales slate (SaaS 2026): menos navy saturado, más profundidad suave */
    --ds-bg: #0c0e14;
    --ds-bg-accent: #141824;
    --ds-surface: #151922;
    --ds-surface-2: #1c2230;
    --ds-text: #e8eaef;
    --ds-text-muted: #9aa3b5;
    --ds-border: #2a3142;
    --ds-border-strong: #3d465c;
    --ds-border-subtle: rgba(255, 255, 255, 0.06);

    --ds-primary: #8b85ff;
    --ds-primary-hover: #a19bff;
    --ds-primary-soft: rgba(139, 133, 255, 0.18);

    --ds-danger: #f87171;
    --ds-danger-bg: rgba(248, 113, 113, 0.14);
    --ds-warning: #fbbf24;
    --ds-warning-bg: rgba(251, 191, 36, 0.12);
    --ds-success: #34d399;
    --ds-success-bg: rgba(52, 211, 153, 0.12);

    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --ds-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
    --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
    --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.42);

    --ds-sidebar-bg: #0a0c12;
    --ds-sidebar-text: #e2e6ef;
    --ds-sidebar-hover: #1a1f2c;
    --ds-sidebar-active: rgba(139, 133, 255, 0.16);
    --ds-topbar-bg: #0a0c12;
    --ds-topbar-text: #e8eaef;

    --ds-login-wave: linear-gradient(160deg, #0c0e14 0%, #151922 55%, #1c2230 100%);
    --ds-blob-1: #4338ca;
    --ds-blob-2: #9d174d;
    --ds-blob-3: #0369a1;
    --ds-blob-4: #6d28d9;
}