/* =====================================================================
   BalMunshi Design Tokens
   Every colour, font, size and effect in the UI comes from here.
   Light theme on :root; dark theme via [data-theme="dark"] or the OS
   setting (unless the page is pinned with data-theme="light").
   Never hard-code a colour in a component: use a --bm-* token.
   ===================================================================== */

:root {
  /* ---------- Brand (same in both themes) ---------- */
  --bm-ink: #111827;
  --bm-brand: #4f46e5;          /* indigo: primary actions, the logo tile */
  --bm-brand-deep: #4338ca;
  --bm-white: #ffffff;
  --bm-highlight: #facc15;
  --bm-on-highlight: #111827;

  /* ---------- Surfaces (light) ---------- */
  --bm-bg: #f7f8fb;
  --bm-surface: #ffffff;
  --bm-surface-2: #f8f9fc;
  --bm-surface-3: #eff1f6;
  --bm-overlay: rgba(17, 24, 39, 0.45);
  --bm-line: rgba(17, 24, 39, 0.08);
  --bm-line-strong: rgba(17, 24, 39, 0.16);

  /* ---------- Text (light) ---------- */
  --bm-text: #111827;
  --bm-text-2: #475066;
  --bm-muted: #667085;
  --bm-placeholder: #98a2b3;

  /* ---------- Accent (light) ---------- */
  --bm-accent: #4f46e5;
  --bm-accent-hover: #4338ca;
  --bm-accent-text: #4338ca;
  --bm-accent-soft: rgba(79, 70, 229, 0.08);
  --bm-accent-line: rgba(79, 70, 229, 0.30);
  --bm-on-accent: #ffffff;
  --bm-focus: rgba(79, 70, 229, 0.45);
  --bm-contrast: #111827;
  --bm-contrast-hover: #1f2937;
  --bm-on-contrast: #ffffff;
  --bm-elevated: #111827;

  /* ---------- Status (light) ---------- */
  --bm-success: #047857;  --bm-success-soft: rgba(5, 150, 105, 0.10);  --bm-success-fill: #059669;
  --bm-warning: #b45309;  --bm-warning-soft: rgba(217, 119, 6, 0.12);  --bm-warning-fill: #d97706;
  --bm-danger:  #b91c1c;  --bm-danger-soft:  rgba(220, 38, 38, 0.09);  --bm-danger-fill:  #dc2626;
  --bm-info:    #0369a1;  --bm-info-soft:    rgba(2, 132, 199, 0.10);  --bm-info-fill:    #0284c7;

  /* ---------- Rent states (map to status) ---------- */
  --bm-state-active: var(--bm-success-fill);     /* paid */
  --bm-state-expiring: var(--bm-warning-fill);   /* part paid / due */
  --bm-state-expired: var(--bm-danger-fill);     /* overdue */
  --bm-state-frozen: var(--bm-info-fill);        /* neutral */

  /* ---------- Effects (light) ---------- */
  --bm-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --bm-shadow-md: 0 8px 24px -8px rgba(17, 24, 39, 0.10), 0 0 0 1px rgba(17, 24, 39, 0.04);
  --bm-shadow-lg: 0 24px 60px -16px rgba(17, 24, 39, 0.18), 0 0 0 1px rgba(17, 24, 39, 0.05);
  --bm-grid: rgba(17, 24, 39, 0.035);

  /* ---------- Typography (Noto Sans Devanagari carries the Hindi text) ---------- */
  --bm-font-display: "Plus Jakarta Sans", "Noto Sans Devanagari", "Segoe UI", Arial, sans-serif;
  --bm-font-body: "Geist", "Noto Sans Devanagari", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bm-font-mono: "Geist Mono", "Noto Sans Devanagari", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --bm-text-xs: 12px;  --bm-text-sm: 13px;  --bm-text-md: 14px;  --bm-text-base: 15px;
  --bm-text-lg: 17px;  --bm-text-xl: 20px;  --bm-text-2xl: 24px; --bm-text-3xl: 30px;
  --bm-text-4xl: 38px; --bm-text-5xl: 48px; --bm-text-6xl: 64px;
  --bm-leading: 1.55;  --bm-leading-tight: 1.1;
  --bm-weight-regular: 400; --bm-weight-medium: 500; --bm-weight-semibold: 600;
  --bm-weight-display: 800; --bm-weight-hero: 800;

  /* ---------- Space (4 px grid) ---------- */
  --bm-space-1: 4px;  --bm-space-2: 8px;  --bm-space-3: 12px; --bm-space-4: 16px;
  --bm-space-5: 20px; --bm-space-6: 24px; --bm-space-8: 32px; --bm-space-10: 40px;
  --bm-space-12: 48px; --bm-space-16: 64px; --bm-space-20: 80px;

  /* ---------- Shape ---------- */
  --bm-radius-sm: 6px; --bm-radius-md: 10px; --bm-radius-lg: 14px; --bm-radius-xl: 22px; --bm-radius-full: 999px;
  --bm-control-h: 40px; --bm-control-h-sm: 32px; --bm-control-h-lg: 48px;

  /* ---------- Layout ---------- */
  --bm-container: 1200px;
  --bm-gutter: clamp(16px, 4vw, 32px);
  --bm-sidebar-w: 248px;
  --bm-topbar-h: 60px;

  /* ---------- Motion ---------- */
  --bm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bm-fast: 120ms; --bm-base: 200ms; --bm-slow: 320ms;

  /* ---------- Layers ---------- */
  --bm-z-sticky: 20; --bm-z-dropdown: 40; --bm-z-overlay: 60; --bm-z-toast: 80;

  color-scheme: light;
}

/* Touch screens: bigger tap targets (44 px minimum for primary controls) */
@media (pointer: coarse) {
  :root { --bm-control-h: 44px; --bm-control-h-sm: 36px; --bm-control-h-lg: 52px; }
}

/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bm-bg: #0b0d13;
    --bm-surface: #12151d;
    --bm-surface-2: #181c26;
    --bm-surface-3: #232836;
    --bm-overlay: rgba(0, 0, 0, 0.70);
    --bm-line: rgba(232, 236, 255, 0.08);
    --bm-line-strong: rgba(232, 236, 255, 0.16);
    --bm-text: #f4f5f9;
    --bm-text-2: #cdd2de;
    --bm-muted: #9aa2b4;
    --bm-placeholder: #6b7386;
    --bm-accent: #6366f1;
    --bm-accent-hover: #818cf8;
    --bm-accent-text: #a5b4fc;
    --bm-accent-soft: rgba(99, 102, 241, 0.18);
    --bm-accent-line: rgba(129, 140, 248, 0.42);
    --bm-focus: rgba(129, 140, 248, 0.60);
    --bm-contrast: #f4f5f9; --bm-contrast-hover: #ffffff; --bm-on-contrast: #0b0d13; --bm-elevated: #232836;
    --bm-success: #34d399;  --bm-success-soft: rgba(52, 211, 153, 0.14);  --bm-success-fill: #10b981;
    --bm-warning: #fbbf24;  --bm-warning-soft: rgba(251, 191, 36, 0.14);  --bm-warning-fill: #f59e0b;
    --bm-danger:  #f87171;  --bm-danger-soft:  rgba(248, 113, 113, 0.14); --bm-danger-fill:  #ef4444;
    --bm-info:    #38bdf8;  --bm-info-soft:    rgba(56, 189, 248, 0.14);  --bm-info-fill:    #0ea5e9;
    --bm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --bm-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(232, 236, 255, 0.05);
    --bm-shadow-lg: 0 28px 70px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(232, 236, 255, 0.06);
    --bm-grid: rgba(232, 236, 255, 0.035);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bm-bg: #0b0d13;
  --bm-surface: #12151d;
  --bm-surface-2: #181c26;
  --bm-surface-3: #232836;
  --bm-overlay: rgba(0, 0, 0, 0.70);
  --bm-line: rgba(232, 236, 255, 0.08);
  --bm-line-strong: rgba(232, 236, 255, 0.16);
  --bm-text: #f4f5f9;
  --bm-text-2: #cdd2de;
  --bm-muted: #9aa2b4;
  --bm-placeholder: #6b7386;
  --bm-accent: #6366f1;
  --bm-accent-hover: #818cf8;
  --bm-accent-text: #a5b4fc;
  --bm-accent-soft: rgba(99, 102, 241, 0.18);
  --bm-accent-line: rgba(129, 140, 248, 0.42);
  --bm-focus: rgba(129, 140, 248, 0.60);
  --bm-contrast: #f4f5f9; --bm-contrast-hover: #ffffff; --bm-on-contrast: #0b0d13; --bm-elevated: #232836;
  --bm-success: #34d399;  --bm-success-soft: rgba(52, 211, 153, 0.14);  --bm-success-fill: #10b981;
  --bm-warning: #fbbf24;  --bm-warning-soft: rgba(251, 191, 36, 0.14);  --bm-warning-fill: #f59e0b;
  --bm-danger:  #f87171;  --bm-danger-soft:  rgba(248, 113, 113, 0.14); --bm-danger-fill:  #ef4444;
  --bm-info:    #38bdf8;  --bm-info-soft:    rgba(56, 189, 248, 0.14);  --bm-info-fill:    #0ea5e9;
  --bm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --bm-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(232, 236, 255, 0.05);
  --bm-shadow-lg: 0 28px 70px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(232, 236, 255, 0.06);
  --bm-grid: rgba(232, 236, 255, 0.035);
}