/* ============================================================================
 * Design System — Tokens
 * Variables CSS para color, tipografía, spacing, radius, shadow y motion.
 * Light por defecto, dark via [data-bs-theme="dark"].
 * ============================================================================ */

:root,
[data-bs-theme="light"] {
    /* Brand --------------------------------------------------------------- */
    --ds-brand-900: #0f1a2e;
    --ds-brand-800: #14223a;
    --ds-brand-700: #1a2942;
    --ds-brand-600: #243a5e;
    --ds-brand-500: #2c5aa0;
    --ds-brand-400: #4a7cc0;
    --ds-brand-300: #88a7d5;

    /* Neutrals (slate) ---------------------------------------------------- */
    --ds-neutral-50:  #f8fafc;
    --ds-neutral-100: #f1f5f9;
    --ds-neutral-200: #e2e8f0;
    --ds-neutral-300: #cbd5e1;
    --ds-neutral-400: #94a3b8;
    --ds-neutral-500: #64748b;
    --ds-neutral-600: #475569;
    --ds-neutral-700: #334155;
    --ds-neutral-800: #1e293b;
    --ds-neutral-900: #0f172a;

    /* Surface & text ------------------------------------------------------ */
    --ds-bg-page:    #fafafa;
    --ds-bg-surface: #ffffff;
    --ds-bg-muted:   #f4f5f7;
    --ds-bg-hover:   #f1f5f9;
    --ds-border:     #e4e7ec;
    --ds-border-strong: #cbd5e1;
    --ds-text:       #0f172a;
    --ds-text-muted: #64748b;
    --ds-text-on-brand: #ffffff;

    /* Semantic ------------------------------------------------------------ */
    --ds-success:   #16a34a;
    --ds-success-bg:#dcfce7;
    --ds-warning:   #d97706;
    --ds-warning-bg:#fef3c7;
    --ds-danger:    #dc2626;
    --ds-danger-bg: #fee2e2;
    --ds-info:      #0284c7;
    --ds-info-bg:   #e0f2fe;

    /* Typography ---------------------------------------------------------- */
    --ds-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
    --ds-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
    --ds-fs-xs:    12px;
    --ds-fs-sm:    13px;
    --ds-fs-base:  14px;
    --ds-fs-md:    16px;
    --ds-fs-lg:    20px;
    --ds-fs-xl:    24px;
    --ds-fs-2xl:   30px;
    --ds-fs-3xl:   36px;
    --ds-lh-tight: 1.2;
    --ds-lh-base:  1.5;
    --ds-lh-loose: 1.7;
    --ds-fw-regular:  400;
    --ds-fw-medium:   500;
    --ds-fw-semibold: 600;
    --ds-fw-bold:     700;

    /* Spacing & radius ---------------------------------------------------- */
    --ds-radius-sm:  4px;
    --ds-radius-md:  8px;
    --ds-radius-lg:  12px;
    --ds-radius-xl:  16px;
    --ds-radius-pill: 999px;

    /* Shadows ------------------------------------------------------------- */
    --ds-shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
    --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05),
                    0 1px 3px rgba(15, 23, 42, 0.04);
    --ds-shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06),
                    0 4px 12px rgba(15, 23, 42, 0.04);
    --ds-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10),
                    0 4px 8px rgba(15, 23, 42, 0.06);
    --ds-shadow-focus: 0 0 0 3px rgba(44, 90, 160, 0.25);

    /* Layout -------------------------------------------------------------- */
    --ds-sidebar-w:  256px;
    --ds-sidebar-w-collapsed: 64px;
    --ds-topbar-h:   56px;
    --ds-content-max: none;
    --ds-page-pad-x: 32px;
    --ds-page-pad-y: 24px;

    /* Motion -------------------------------------------------------------- */
    --ds-dur-fast:  120ms;
    --ds-dur-base:  180ms;
    --ds-dur-slow:  280ms;
    --ds-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
    --ds-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

    /* Bootstrap variable overrides ---------------------------------------- */
    --bs-body-bg: var(--ds-bg-page);
    --bs-body-color: var(--ds-text);
    --bs-border-color: var(--ds-border);
    --bs-border-radius: var(--ds-radius-md);
    --bs-border-radius-sm: var(--ds-radius-sm);
    --bs-border-radius-lg: var(--ds-radius-lg);
    --bs-primary: var(--ds-brand-700);
    --bs-primary-rgb: 26, 41, 66;
    --bs-link-color: var(--ds-brand-500);
    --bs-link-hover-color: var(--ds-brand-700);
    --bs-secondary-color: var(--ds-text-muted);
    --bs-body-font-family: var(--ds-font-sans);
    --bs-body-font-size: var(--ds-fs-base);
    --bs-body-line-height: var(--ds-lh-base);
}

[data-bs-theme="dark"] {
    --ds-bg-page:    #0a0d14;
    --ds-bg-surface: #111827;
    --ds-bg-muted:   #1f2937;
    --ds-bg-hover:   #1a2433;
    --ds-border:     #2a3441;
    --ds-border-strong: #475569;
    --ds-text:       #e5e7eb;
    --ds-text-muted: #94a3b8;
    --ds-text-on-brand: #ffffff;

    --ds-brand-900: #0a1220;
    --ds-brand-800: #0f1a2e;
    --ds-brand-700: #1a2942;
    --ds-brand-600: #243a5e;
    --ds-brand-500: #4a7cc0;
    --ds-brand-400: #6c98d4;
    --ds-brand-300: #a3bee3;

    --ds-success:   #22c55e;
    --ds-success-bg:#052e16;
    --ds-warning:   #f59e0b;
    --ds-warning-bg:#451a03;
    --ds-danger:    #ef4444;
    --ds-danger-bg: #450a0a;
    --ds-info:      #38bdf8;
    --ds-info-bg:   #082f49;

    --ds-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.2);
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ds-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
    --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --ds-shadow-focus: 0 0 0 3px rgba(106, 152, 212, 0.35);

    --bs-body-bg: var(--ds-bg-page);
    --bs-body-color: var(--ds-text);
    --bs-border-color: var(--ds-border);
    --bs-primary: var(--ds-brand-500);
    --bs-primary-rgb: 74, 124, 192;
    --bs-link-color: var(--ds-brand-400);
    --bs-link-hover-color: var(--ds-brand-300);
    --bs-secondary-color: var(--ds-text-muted);
    --bs-tertiary-bg: var(--ds-bg-muted);
    --bs-emphasis-color: var(--ds-text);
}