/* =============================================================================
   Split Infinity — Design Token System
   Brand identity tokens for a modern, trust-inspiring financial application.
   These cascade into both MudBlazor theme and Bootstrap/custom CSS.
   ============================================================================= */

:root {
    /* --- Brand Colors --- */
    --si-brand-50:  #eff6ff;
    --si-brand-100: #dbeafe;
    --si-brand-200: #bfdbfe;
    --si-brand-300: #93c5fd;
    --si-brand-400: #60a5fa;
    --si-brand-500: #3b82f6;  /* Primary brand blue */
    --si-brand-600: #2563eb;  /* Default primary */
    --si-brand-700: #1d4ed8;
    --si-brand-800: #1e40af;
    --si-brand-900: #1e3a8a;

    /* --- Semantic Color Tokens (Light) --- */
    --si-primary:         #2563eb;
    --si-primary-hover:   #1d4ed8;
    --si-primary-muted:   #dbeafe;
    --si-primary-text:    #1e40af;

    --si-success:         #16a34a;
    --si-success-muted:   #dcfce7;
    --si-success-text:    #15803d;

    --si-warning:         #d97706;
    --si-warning-muted:   #fef3c7;
    --si-warning-text:    #b45309;

    --si-danger:          #dc2626;
    --si-danger-muted:    #fee2e2;
    --si-danger-text:     #b91c1c;

    /* --- Neutral Scale --- */
    --si-neutral-0:   #ffffff;
    --si-neutral-50:  #f8fafc;
    --si-neutral-100: #f1f5f9;
    --si-neutral-200: #e2e8f0;
    --si-neutral-300: #cbd5e1;
    --si-neutral-400: #94a3b8;
    --si-neutral-500: #64748b;
    --si-neutral-600: #475569;
    --si-neutral-700: #334155;
    --si-neutral-800: #1e293b;
    --si-neutral-900: #0f172a;

    /* --- Surface Tokens (Light Mode) --- */
    --si-surface-bg:       var(--si-neutral-50);
    --si-surface-card:     var(--si-neutral-0);
    --si-surface-elevated: var(--si-neutral-0);
    --si-surface-sunken:   var(--si-neutral-100);
    --si-surface-overlay:  rgba(15, 23, 42, 0.05);

    /* --- Text Tokens (Light Mode) --- */
    --si-text-primary:   var(--si-neutral-900);
    --si-text-secondary: var(--si-neutral-600);
    --si-text-muted:     var(--si-neutral-400);
    --si-text-disabled:  var(--si-neutral-300);
    --si-text-inverse:   var(--si-neutral-0);
    --si-text-brand:     var(--si-primary);

    /* --- Border Tokens --- */
    --si-border-subtle:  var(--si-neutral-200);
    --si-border-default: var(--si-neutral-300);
    --si-border-strong:  var(--si-neutral-400);
    --si-border-brand:   var(--si-primary);

    /* --- Typography Scale --- */
    --si-font-sans: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --si-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --si-font-dyslexia: 'Atkinson Hyperlegible', sans-serif;

    /* Fluid type scale using clamp(min, preferred, max) */
    --si-text-xs:   clamp(0.688rem, 0.65vw + 0.5rem, 0.75rem);
    --si-text-sm:   clamp(0.813rem, 0.75vw + 0.55rem, 0.875rem);
    --si-text-base: clamp(0.938rem, 0.9vw + 0.6rem, 1rem);
    --si-text-md:   clamp(1.063rem, 1.1vw + 0.65rem, 1.125rem);
    --si-text-lg:   clamp(1.188rem, 1.3vw + 0.7rem, 1.25rem);
    --si-text-xl:   clamp(1.313rem, 1.6vw + 0.8rem, 1.5rem);
    --si-text-2xl:  clamp(1.5rem, 2vw + 0.9rem, 1.875rem);
    --si-text-3xl:  clamp(1.875rem, 2.5vw + 1rem, 2.25rem);
    --si-text-4xl:  clamp(2.25rem, 3vw + 1.1rem, 3rem);

    --si-font-weight-light:   300;
    --si-font-weight-normal:  400;
    --si-font-weight-medium:  500;
    --si-font-weight-semibold: 600;
    --si-font-weight-bold:    700;

    --si-line-height-tight:  1.25;
    --si-line-height-snug:   1.375;
    --si-line-height-normal: 1.5;
    --si-line-height-relaxed: 1.625;

    /* --- Spacing Scale --- */
    --si-space-1:  0.25rem;   /* 4px  */
    --si-space-2:  0.5rem;    /* 8px  */
    --si-space-3:  0.75rem;   /* 12px */
    --si-space-4:  1rem;      /* 16px */
    --si-space-5:  1.25rem;   /* 20px */
    --si-space-6:  1.5rem;    /* 24px */
    --si-space-8:  2rem;      /* 32px */
    --si-space-10: 2.5rem;    /* 40px */
    --si-space-12: 3rem;      /* 48px */
    --si-space-16: 4rem;      /* 64px */
    --si-space-20: 5rem;      /* 80px */
    --si-space-24: 6rem;      /* 96px */

    /* --- Border Radius --- */
    --si-radius-sm:   0.25rem;   /* 4px  — form inputs, tags */
    --si-radius-md:   0.5rem;    /* 8px  — cards, buttons */
    --si-radius-lg:   0.75rem;   /* 12px — panels, modals */
    --si-radius-xl:   1rem;      /* 16px — large cards */
    --si-radius-2xl:  1.5rem;    /* 24px — feature cards */
    --si-radius-full: 9999px;    /* pill/badge shape */

    /* --- Shadows --- */
    --si-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --si-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --si-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --si-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --si-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --si-shadow-brand: 0 0 0 3px rgba(37, 99, 235, 0.2);

    /* --- Motion --- */
    --si-duration-fast:   100ms;
    --si-duration-normal: 200ms;
    --si-duration-slow:   300ms;
    --si-ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
    --si-ease-in:         cubic-bezier(0.4, 0, 1, 1);
    --si-ease-out:        cubic-bezier(0, 0, 0.2, 1);
    --si-ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Layout --- */
    --si-nav-width:       260px;
    --si-nav-width-mini:  72px;
    --si-topbar-height:   64px;
    --si-content-max:     1280px;
    --si-sidebar-width:   320px;

    /* --- Z-Index Scale --- */
    --si-z-base:    0;
    --si-z-card:    1;
    --si-z-dropdown: 100;
    --si-z-sticky:  200;
    --si-z-overlay: 300;
    --si-z-modal:   400;
    --si-z-toast:   500;
}

/* =========================================================
   Dark Mode Token Overrides
   ========================================================= */
[data-bs-theme="dark"] {
    /* Semantic overrides */
    --si-primary:         #60a5fa;
    --si-primary-hover:   #93c5fd;
    --si-primary-muted:   rgba(96, 165, 250, 0.15);
    --si-primary-text:    #93c5fd;

    --si-success:         #4ade80;
    --si-success-muted:   rgba(74, 222, 128, 0.15);
    --si-success-text:    #86efac;

    --si-warning:         #fbbf24;
    --si-warning-muted:   rgba(251, 191, 36, 0.15);
    --si-warning-text:    #fcd34d;

    --si-danger:          #f87171;
    --si-danger-muted:    rgba(248, 113, 113, 0.15);
    --si-danger-text:     #fca5a5;

    /* Surface overrides */
    --si-surface-bg:       #0f172a;
    --si-surface-card:     #1e293b;
    --si-surface-elevated: #293548;
    --si-surface-sunken:   #0a1120;
    --si-surface-overlay:  rgba(255, 255, 255, 0.05);

    /* Text overrides */
    --si-text-primary:   #f1f5f9;
    --si-text-secondary: #94a3b8;
    --si-text-muted:     #64748b;
    --si-text-disabled:  #475569;
    --si-text-inverse:   #0f172a;
    --si-text-brand:     #60a5fa;

    /* Border overrides */
    --si-border-subtle:  rgba(255, 255, 255, 0.06);
    --si-border-default: rgba(255, 255, 255, 0.12);
    --si-border-strong:  rgba(255, 255, 255, 0.2);

    /* Shadow overrides (stronger in dark mode) */
    --si-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --si-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --si-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --si-shadow-brand: 0 0 0 3px rgba(96, 165, 250, 0.25);
}