/* ============================================================
   Microfinance System — Design Tokens (Foundation, Phase 1)
   Loaded AFTER app.css. Token-level theming:
   - New `--mf-*` tokens are the single source of truth.
   - Legacy `--primary-color` etc. and Bootstrap `--bs-*` vars are
     remapped to the tokens so ALL existing CSS follows the new
     palette without markup changes.
   - Dark mode: `[data-theme="dark"]` redefines tokens only.
   ============================================================ */

:root {
    /* ---- Brand ---- */
    --mf-primary: #0F7A52;
    --mf-primary-hover: #0C6343;
    --mf-primary-active: #0A5638;
    --mf-primary-soft: #E4F1EA;
    --mf-secondary: #175CD3;
    --mf-secondary-soft: #E4ECFB;

    /* ---- Status ----
       *-on-soft variants are the AA-compliant foreground for text/icons drawn
       on the matching *-soft tint (badges, pills, alerts). The base tokens stay
       bright for fills (charts, progress bars) where contrast rules don't apply. */
    --mf-success: #16A34A;
    --mf-success-soft: #E6F6EC;
    --mf-success-on-soft: #137038;   /* 5.51:1 on --mf-success-soft */
    --mf-warning: #B45309;        /* text-safe amber (AA on soft bg) */
    --mf-warning-bright: #F59E0B; /* fills, icons */
    --mf-warning-soft: #FDF1E0;
    --mf-danger: #DC2626;
    --mf-danger-deep: #B42318;
    --mf-danger-soft: #FCE9E7;
    --mf-info: #2563EB;
    --mf-info-soft: #E7EEFC;
    --mf-violet: #6941C6;
    --mf-violet-soft: #EDE7FB;

    /* ---- Neutrals ---- */
    --mf-bg: #F8FAFC;
    --mf-surface: #FFFFFF;
    --mf-surface-2: #F3F5F7;
    --mf-border: #E5E7EB;
    --mf-border-strong: #D2D6DB;
    --mf-text: #111827;
    --mf-text-2: #4B5563;
    --mf-text-muted: #65707C;   /* AA on both --mf-surface and --mf-surface-2 */
    --mf-text-faint: #9CA3AF;

    /* ---- Sidebar (kept dark; refined slate) ---- */
    --mf-sidebar-bg: #0E1614;
    --mf-sidebar-bg-2: #12201B;
    --mf-sidebar-text: #B9C4BF;
    --mf-sidebar-text-active: #FFFFFF;
    --mf-sidebar-active-bg: rgba(52, 192, 138, 0.14);
    --mf-sidebar-accent: #34C08A;
    --mf-sidebar-border: rgba(255, 255, 255, 0.06);

    /* ---- Type scale ---- */
    --mf-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mf-fs-caption: 12px;
    --mf-fs-body: 14px;
    --mf-fs-card-h: 16px;
    --mf-fs-section-h: 24px;
    --mf-fs-page-h: 30px;
    --mf-fs-dash-h: 48px;

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

    /* ---- Radius ---- */
    --mf-r-card: 16px;
    --mf-r-btn: 10px;
    --mf-r-input: 10px;
    --mf-r-pill: 999px;

    /* ---- Shadows (only two) ---- */
    --mf-shadow-sm: 0 2px 10px rgba(0, 0, 0, .04);
    --mf-shadow-md: 0 12px 30px rgba(0, 0, 0, .08);

    /* ---- Glassy / elevated cards ---- */
    --mf-r-card-lg: 20px;                                     /* rounder corners */
    --mf-card-surface: linear-gradient(160deg, #FFFFFF 0%, #FBFCFB 100%);
    --mf-card-surface-hover: linear-gradient(160deg, #FFFFFF 0%, #F5FAF7 100%);
    --mf-card-sheen: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 40%);
    --mf-card-glow: 0 16px 40px -12px rgba(15, 122, 82, .22); /* brand-green glow on hover */
    --mf-card-hairline: rgba(255, 255, 255, .7);             /* top inner highlight */

    /* KPI neon glow — a coloured halo that bleeds onto the ground (light theme:
       kept restrained so text stays readable on white). --mf-kpi-rgb is set
       per-tone in theme.css; alpha here controls rest vs hover intensity. */
    --mf-kpi-glow-rest: 0 8px 24px -10px rgba(var(--mf-kpi-rgb, 15,122,82), .28);
    --mf-kpi-glow-hover: 0 14px 40px -8px rgba(var(--mf-kpi-rgb, 15,122,82), .45);
    --mf-card-blur: 14px;

    /* ---- Motion ---- */
    --mf-ease: 150ms ease;

    /* ---- Derived (precomputed; avoids color-mix for older browsers) ---- */
    --mf-ring: rgba(15, 122, 82, 0.18);
    --mf-ring-strong: rgba(15, 122, 82, 0.30);
    --mf-success-border: rgba(22, 163, 74, 0.25);
    --mf-danger-border: rgba(220, 38, 38, 0.25);
    --mf-warning-border: rgba(245, 158, 11, 0.30);
    --mf-info-border: rgba(37, 99, 235, 0.25);
    --mf-info-tint-hover: rgba(37, 99, 235, 0.16);
    --mf-warning-tint-hover: rgba(245, 158, 11, 0.18);
    --mf-accent-tint: rgba(15, 122, 82, 0.14);        /* translucent brand green (borders, glows in app.css) */
    --mf-accent-tint-strong: rgba(15, 122, 82, 0.30);

    /* ============================================
       Legacy variable remap (app.css keeps working)
       ============================================ */
    --primary-color: var(--mf-primary);
    --primary-dark: var(--mf-primary-active);
    --primary-light: #16A34A;
    --secondary-color: var(--mf-text-muted);
    --success-color: var(--mf-success);
    --warning-color: var(--mf-warning-bright);
    --danger-color: var(--mf-danger);
    --info-color: var(--mf-info);
    --light-color: var(--mf-primary-soft);
    --border-radius: var(--mf-r-btn);
    --box-shadow: var(--mf-shadow-sm);
    --box-shadow-lg: var(--mf-shadow-md);
    --transition-speed: 0.2s;

    /* ============================================
       Bootstrap 5.3 variable remap
       ============================================ */
    --bs-primary: var(--mf-primary);
    --bs-primary-rgb: 15, 122, 82;
    --bs-secondary: var(--mf-text-muted);
    --bs-secondary-rgb: 107, 114, 128;
    --bs-success: var(--mf-success);
    --bs-success-rgb: 22, 163, 74;
    --bs-warning: var(--mf-warning-bright);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: var(--mf-danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-info: var(--mf-info);
    --bs-info-rgb: 37, 99, 235;
    --bs-body-bg: var(--mf-bg);
    --bs-body-color: var(--mf-text);
    --bs-border-color: var(--mf-border);
    --bs-border-radius: var(--mf-r-btn);
    --bs-border-radius-lg: var(--mf-r-card);
    --bs-link-color: var(--mf-primary);
    --bs-link-hover-color: var(--mf-primary-hover);
    --bs-font-sans-serif: var(--mf-font);
}

/* ============================================================
   Dark theme — tokens only. Stamped by theme.js on <html>.
   ============================================================ */
[data-theme="dark"] {
    --mf-primary: #34C08A;
    --mf-primary-hover: #4ACD9A;
    --mf-primary-active: #2AAB79;
    --mf-primary-soft: #12261E;
    --mf-secondary: #7FA9F5;
    --mf-secondary-soft: #131F33;

    --mf-success: #3DD68C;
    --mf-success-soft: #10261B;
    --mf-success-on-soft: #3DD68C;   /* 8.51:1 on dark success-soft — no change needed */
    --mf-warning: #E8A24C;
    --mf-warning-bright: #E8A24C;
    --mf-warning-soft: #2A2013;
    --mf-danger: #F0857A;
    --mf-danger-deep: #F0857A;
    --mf-danger-soft: #2C1715;
    --mf-info: #7FA9F5;
    --mf-info-soft: #131F33;
    --mf-violet: #B49BEC;
    --mf-violet-soft: #1E1730;

    --mf-bg: #0E1113;
    --mf-surface: #16191C;
    --mf-surface-2: #1D2226;
    --mf-border: #262B30;
    --mf-border-strong: #333A40;
    --mf-text: #ECEEF0;
    --mf-text-2: #B4BAC0;
    --mf-text-muted: #8B939B;
    --mf-text-faint: #6A727A;

    /* Sidebar — deep emerald-teal panel, distinct from the neutral content bg (#0E1113) */
    --mf-sidebar-bg: #0D1F1A;
    --mf-sidebar-bg-2: #0A1713;
    --mf-sidebar-text: #A6B7B0;
    --mf-sidebar-text-active: #FFFFFF;
    --mf-sidebar-active-bg: rgba(52, 192, 138, 0.16);
    --mf-sidebar-accent: #34C08A;
    --mf-sidebar-border: rgba(52, 192, 138, 0.12);

    --mf-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --mf-shadow-md: 0 12px 30px rgba(0, 0, 0, .5);

    /* Glassy cards — dark: subtle top-lit gradient, green glow, faint hairline */
    --mf-card-surface: linear-gradient(160deg, #191F1B 0%, #141A17 100%);
    --mf-card-surface-hover: linear-gradient(160deg, #1C2420 0%, #161E1A 100%);
    --mf-card-sheen: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
    --mf-card-glow: 0 16px 40px -12px rgba(52, 192, 138, .28);
    --mf-card-hairline: rgba(255, 255, 255, .08);

    /* Neon bleeds far more on black — this is where the mockup look lives. */
    --mf-kpi-glow-rest: 0 10px 34px -8px rgba(var(--mf-kpi-rgb, 52,192,138), .40);
    --mf-kpi-glow-hover: 0 18px 60px -6px rgba(var(--mf-kpi-rgb, 52,192,138), .65);

    --mf-ring: rgba(52, 192, 138, 0.22);
    --mf-ring-strong: rgba(52, 192, 138, 0.35);
    --mf-success-border: rgba(61, 214, 140, 0.28);
    --mf-danger-border: rgba(240, 133, 122, 0.28);
    --mf-warning-border: rgba(232, 162, 76, 0.32);
    --mf-info-border: rgba(127, 169, 245, 0.28);
    --mf-info-tint-hover: rgba(127, 169, 245, 0.18);
    --mf-warning-tint-hover: rgba(232, 162, 76, 0.20);
    --mf-accent-tint: rgba(52, 192, 138, 0.16);
    --mf-accent-tint-strong: rgba(52, 192, 138, 0.32);

    /* Bootstrap dark remap */
    --bs-primary-rgb: 52, 192, 138;
    --bs-body-bg: var(--mf-bg);
    --bs-body-color: var(--mf-text);
    --bs-border-color: var(--mf-border);
    --bs-tertiary-bg: var(--mf-surface-2);
    --bs-secondary-bg: var(--mf-surface-2);
}