/* ============================================================
   Financial Hub Pro — Design Tokens
   ============================================================ */

:root {
    /* --- Primary Palette --- */
    --color-primary-50:  #eef2f7;
    --color-primary-100: #d4dde8;
    --color-primary-200: #a9bbcf;
    --color-primary-300: #7e99b7;
    --color-primary-400: #53779f;
    --color-primary-500: #2d5a87;
    --color-primary-600: #1e3a5f;
    --color-primary-700: #162d4a;
    --color-primary-800: #0f1f34;
    --color-primary-900: #07111f;

    /* --- Neutral --- */
    --color-neutral-0:   #ffffff;
    --color-neutral-25:  #fafbfc;
    --color-neutral-50:  #f4f6f9;
    --color-neutral-100: #e8ecf1;
    --color-neutral-200: #d1d8e0;
    --color-neutral-300: #b0bac5;
    --color-neutral-400: #8c96a3;
    --color-neutral-500: #6b7685;
    --color-neutral-600: #4f5966;
    --color-neutral-700: #374151;
    --color-neutral-800: #1f2937;
    --color-neutral-900: #111827;

    /* --- Semantic --- */
    --color-success:     #16a34a;
    --color-success-bg:  #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-warning:     #d97706;
    --color-warning-bg:  #fffbeb;
    --color-warning-border: #fde68a;
    --color-danger:      #dc2626;
    --color-danger-bg:   #fef2f2;
    --color-danger-border: #fecaca;
    --color-info:        #2563eb;
    --color-info-bg:     #eff6ff;
    --color-info-border: #bfdbfe;

    /* --- Typography --- */
    --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'IBM Plex Mono', 'Consolas', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */

    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

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

    /* --- Border Radius --- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

    /* --- Transitions --- */
    --transition-fast:   150ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   300ms ease;

    /* --- Layout --- */
    --sidebar-width:     260px;
    --sidebar-collapsed: 68px;
    --header-height:     60px;
    --content-max-width: 1280px;

    /* --- Z-Index --- */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
}