/* Light-mode design tokens + Bootstrap variable mapping.
   All component CSS reads these tokens via var(--mf-*). */

:root,
[data-bs-theme="light"] {
    /* Brand */
    --mf-primary: #4F46E5;
    --mf-primary-hover: #4338CA;
    --mf-primary-subtle: #EEF2FF;
    --mf-primary-rgb: 79, 70, 229;

    /* Surfaces */
    --mf-bg: #FFFFFF;
    --mf-surface: #F8FAFC;
    --mf-surface-2: #F1F5F9;
    --mf-border: #E2E8F0;
    --mf-border-strong: #CBD5E1;

    /* Text */
    --mf-text: #0F172A;
    --mf-text-muted: #475569;
    --mf-text-subtle: #94A3B8;

    /* Status */
    --mf-success: #10B981;
    --mf-success-subtle: #D1FAE5;
    --mf-danger: #EF4444;
    --mf-danger-subtle: #FEE2E2;
    --mf-warning: #F59E0B;
    --mf-warning-subtle: #FEF3C7;
    --mf-info: #3B82F6;
    --mf-info-subtle: #DBEAFE;

    /* Spacing scale (4px base) */
    --mf-space-1: 4px;
    --mf-space-2: 8px;
    --mf-space-3: 12px;
    --mf-space-4: 16px;
    --mf-space-5: 20px;
    --mf-space-6: 24px;
    --mf-space-7: 32px;
    --mf-space-8: 40px;
    --mf-space-9: 48px;
    --mf-space-10: 64px;

    /* Radii */
    --mf-radius-sm: 4px;
    --mf-radius: 8px;
    --mf-radius-lg: 12px;
    --mf-radius-xl: 16px;
    --mf-radius-full: 9999px;

    /* Shadows */
    --mf-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --mf-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --mf-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -1px rgba(15, 23, 42, .04);
    --mf-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -2px rgba(15, 23, 42, .04);

    /* Motion */
    --mf-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --mf-transition-lg: 250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout dimensions */
    --mf-sidebar-w: 240px;
    --mf-sidebar-w-collapsed: 64px;
    --mf-folders-w: 240px;
    --mf-list-w: 380px;
    --mf-topbar-h: 56px;

    /* Bootstrap variable bridge — Bootstrap widgets pick these up automatically */
    --bs-body-bg: var(--mf-bg);
    --bs-body-color: var(--mf-text);
    --bs-border-color: var(--mf-border);
    --bs-primary: var(--mf-primary);
    --bs-primary-rgb: var(--mf-primary-rgb);
    --bs-link-color: var(--mf-primary);
    --bs-link-hover-color: var(--mf-primary-hover);
    --bs-secondary-color: var(--mf-text-muted);
    --bs-tertiary-color: var(--mf-text-subtle);
    --bs-tertiary-bg: var(--mf-surface);
    --bs-emphasis-color: var(--mf-text);
}