/*
 * PrivateBanker design tokens.
 * Palette: navy/slate neutrals + a single blue accent ("Trust Navy"), positive/negative
 * feedback colors, and categorical badge hues. Typography: IBM Plex Sans / IBM Plex Mono
 * (financial-trust pairing with genuinely tabular figures for aligned numeric columns).
 *
 * Breakpoints (documented here since custom properties can't be used inside @media
 * conditions): phone <640px, tablet 640-1023px, desktop >=1024px.
 */

:root {
    /* ---- Primitives: neutral ramp ---- */
    --slate-50:  #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;
    --slate-950: #020617;

    /* ---- Primitives: accent ---- */
    --blue-50:  #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;

    /* ---- Primitives: feedback ---- */
    --emerald-50:  #ECFDF5;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --red-50:  #FEF2F2;
    --red-600: #DC2626;
    --red-700: #B91C1C;

    /* ---- Primitives: badge hues ---- */
    --amber-600:  #D97706;
    --violet-600: #7C3AED;
    --yellow-700: #A16207;

    /* =================== Semantic tokens =================== */

    /* Surfaces */
    --surface-page:          var(--slate-50);
    --surface-card:          #FFFFFF;
    --surface-sunken:        var(--slate-100);
    --surface-inverse:       var(--slate-900);
    --surface-inverse-hover: var(--slate-800);

    /* Text */
    --text-primary:       var(--slate-950);
    --text-secondary:     var(--slate-600);
    --text-muted:         var(--slate-500);
    --text-inverse:       #FFFFFF;
    --text-inverse-muted: var(--slate-400);

    /* Borders */
    --border-default: var(--slate-200);
    --border-subtle:  var(--slate-100);
    --border-strong:  var(--slate-300);
    --border-inverse: var(--slate-700);

    /* Accent / interactive */
    --accent:               var(--blue-600);
    --accent-hover:         var(--blue-700);
    --accent-subtle:        var(--blue-50);
    --accent-contrast-text: #FFFFFF;

    /* Feedback (gain/loss) */
    --positive:    var(--emerald-600);
    --positive-bg: var(--emerald-50);
    --negative:    var(--red-600);
    --negative-bg: var(--red-50);

    /* Badges (account/category types) */
    --badge-checking:   var(--blue-600);
    --badge-savings:    var(--emerald-600);
    --badge-investment: var(--amber-600);
    --badge-pension:    var(--yellow-700);
    --badge-business:   var(--violet-600);
    --badge-other:      var(--slate-500);

    /* Badges (crypto transfer-match status) */
    --badge-match-direct:    var(--emerald-600);
    --badge-match-onchain:   var(--blue-600);
    --badge-match-heuristic: var(--amber-600);
    --badge-match-manual:    var(--violet-600);
    --badge-match-none:      var(--slate-400);

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

    /* ---- Typography ---- */
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   20px;
    --text-2xl:  24px;

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

    /* ---- Radius ---- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* ---- Shadow ---- */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.22);

    /*
     * ---- Z-index scale ----
     * Values match what style.css already uses for sticky/dropdown/flyout/modal/ai-menu/
     * spinner-overlay so tokenizing them doesn't change current stacking behavior.
     * --z-drawer-overlay/--z-drawer are new (mobile nav), slotted above flyouts and below
     * the modal so opening a modal always covers an open drawer.
     */
    --z-sticky:          1;
    --z-dropdown:        10;
    --z-flyout:          20;
    --z-drawer-overlay:  40;
    --z-drawer:          50;
    --z-modal-overlay:   100;
    --z-modal:           101;
    --z-ai-menu:         1000;
    --z-spinner-overlay: 1000;
}