/* ============================================================================
   LendSmart — Design Tokens
   ----------------------------------------------------------------------------
   Philosophy: "High-trust operator console" (Swiss / Dieter Rams influenced) —
   restrained, functional, one accent, neutral cool-grays, color used only to
   signal state. Tuned for a back-office lending CRM used all day by operators.

   - Base spacing unit: 4px (dense tables + comfortable profiles from one scale)
   - Semantic tokens only — components reference these, never raw hex values.
   - Light + dark palettes are both intentional, not inverted.
   - Extended STATUS system for lending: application lifecycle, KYC, DPD aging,
     risk grades — see "Lending status system" below.

   Load order: link this file FIRST, before any component/page CSS.
   Served by Flask at: /static/css/tokens.css
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. LIGHT MODE (default)
   --------------------------------------------------------------------------- */
:root {
  /* --- Surfaces / backgrounds --- */
  --color-bg-primary:      #f6f7f9;   /* app canvas */
  --color-bg-secondary:    #ffffff;   /* cards, panels, table surface */
  --color-bg-tertiary:     #eef0f4;   /* inputs, wells, hover rows */
  --color-bg-elevated:     #ffffff;   /* dropdowns, popovers, drawers */
  --color-bg-inverse:      #171b22;   /* tooltips, inverse chips */
  --color-bg-hover:        #f0f2f5;   /* row / list-item hover */
  --color-bg-selected:     #e8effc;   /* selected row (accent-tinted) */
  --color-bg-disabled:     #f0f1f3;

  /* --- Text --- */
  --color-text-primary:    #1a1f2b;   /* headings, key values */
  --color-text-secondary:  #5a6472;   /* labels, meta */
  --color-text-tertiary:   #6b7480;   /* placeholder, hints — AA on white (4.5:1+) */
  --color-text-inverse:    #f6f7f9;   /* on inverse/accent backgrounds */
  --color-text-link:       #2344c2;
  --color-text-on-accent:  #ffffff;

  /* --- Borders --- */
  --color-border-primary:   #e0e4ea;  /* default dividers, card edges */
  --color-border-secondary: #eceef2;  /* subtle inner rules */
  --color-border-strong:    #cfd5de;  /* input borders, emphasis */
  --color-border-focus:     #2b52e0;

  /* --- Accent (single, restrained cobalt) --- */
  --color-accent-primary:        #2b52e0;
  --color-accent-primary-hover:  #2344c2;
  --color-accent-primary-active: #1d3aa6;
  --color-accent-subtle:         #e8effc;  /* accent background wash */
  --color-accent-subtle-text:    #1d3aa6;  /* text on accent-subtle */
  --color-accent-secondary:      #0e7c86;  /* secondary/teal for links & funded */

  /* --- Base semantic status (foreground / subtle bg / subtle text) --- */
  --color-status-success:        #1f9d57;
  --color-status-success-bg:     #e4f5eb;
  --color-status-success-text:   #10693a;
  --color-status-warning:        #c17d00;
  --color-status-warning-bg:     #fbf0d9;
  --color-status-warning-text:   #8a5900;
  --color-status-error:          #d63b3b;
  --color-status-error-bg:       #fbe6e6;
  --color-status-error-text:     #a02020;
  --color-status-info:           #2b6fd4;
  --color-status-info-bg:        #e6effb;
  --color-status-info-text:      #1a4fa0;
  --color-status-neutral:        #6b7480;
  --color-status-neutral-bg:     #eceef1;
  --color-status-neutral-text:   #454d59;

  /* --- Overlays / scrims --- */
  --color-surface-overlay:  rgba(23, 27, 34, 0.44);  /* modal backdrop */
  --color-surface-scrim:    rgba(23, 27, 34, 0.06);  /* subtle press scrim */

  /* --- Data-visualization categorical palette --- */
  --color-chart-1: #2b52e0;
  --color-chart-2: #0e7c86;
  --color-chart-3: #c17d00;
  --color-chart-4: #7a53d1;
  --color-chart-5: #1f9d57;
  --color-chart-6: #d6606b;

  /* -------------------------------------------------------------------------
     Lending status system (semantic — reused across badges/pills everywhere)
     Each maps to a base color already defined above, so dark mode inherits.
     Use the *-bg / *-text pair for badges; the solid var for dots/bars.
     ------------------------------------------------------------------------- */
  /* Application / loan lifecycle */
  --status-draft:      var(--color-status-neutral);
  --status-submitted:  var(--color-status-info);
  --status-review:     var(--color-status-info);
  --status-needs-info: var(--color-status-warning);
  --status-approved:   var(--color-status-success);
  --status-declined:   var(--color-status-error);
  --status-withdrawn:  var(--color-status-neutral);
  --status-funded:     var(--color-accent-secondary);
  --status-active:     var(--color-status-success);
  --status-closed:     var(--color-status-neutral);
  --status-overdue:    var(--color-status-error);

  /* KYC / KYB / verification */
  --status-kyc-pass:    var(--color-status-success);
  --status-kyc-pending: var(--color-status-warning);
  --status-kyc-review:  var(--color-status-info);
  --status-kyc-fail:    var(--color-status-error);

  /* Delinquency / DPD aging buckets (escalating) */
  --status-dpd-current: #1f9d57;  /* on-time */
  --status-dpd-1-30:    #c9a227;  /* early */
  --status-dpd-31-60:   #d97a1f;  /* orange */
  --status-dpd-61-90:   #d6552a;  /* deep orange */
  --status-dpd-90plus:  #c22828;  /* severe */

  /* Risk grades A(best) → E(worst) */
  --risk-a: #1f9d57;
  --risk-b: #7fae2e;
  --risk-c: #c9a227;
  --risk-d: #d97a1f;
  --risk-e: #c22828;

  /* -------------------------------------------------------------------------
     2. SPACING — 4px base
     ------------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  1px;      /* hairline */
  --space-2:  2px;
  --space-3:  4px;      /* base unit */
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;

  /* -------------------------------------------------------------------------
     3. TYPOGRAPHY
     Inter for UI (excellent tabular figures); system fallback if not loaded.
     ------------------------------------------------------------------------- */
  --font-family-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --font-size-xs:   11px;   /* dense table meta, badge text */
  --font-size-sm:   12px;   /* table cells, secondary UI */
  --font-size-base: 13px;   /* default operator body size */
  --font-size-md:   14px;   /* comfortable body, form inputs */
  --font-size-lg:   16px;   /* section titles */
  --font-size-xl:   20px;   /* page titles */
  --font-size-2xl:  24px;   /* dashboard headings */
  --font-size-3xl:  30px;   /* KPI figures */
  --font-size-4xl:  38px;   /* hero metric */

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

  --line-height-tight:   1.2;
  --line-height-snug:    1.35;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;   /* all-caps labels, table headers */

  /* -------------------------------------------------------------------------
     4. LAYOUT
     ------------------------------------------------------------------------- */
  --max-width-content: 72ch;
  --max-width-wide:    1120px;
  --max-width-page:    1600px;    /* dense back-office uses full width */

  --sidebar-width:          236px;
  --sidebar-width-collapsed: 60px;
  --topbar-height:          52px;

  --border-radius-sm:   4px;
  --border-radius-md:   6px;
  --border-radius-lg:   10px;
  --border-radius-xl:   14px;
  --border-radius-full: 999px;

  --border-width-thin: 1px;

  /* Shadows — restrained; elevation reads via borders first, shadow second. */
  --shadow-xs:    0 1px 1px rgba(23, 27, 34, 0.04);
  --shadow-sm:    0 1px 2px rgba(23, 27, 34, 0.06), 0 1px 3px rgba(23, 27, 34, 0.05);
  --shadow-md:    0 2px 6px rgba(23, 27, 34, 0.08), 0 4px 12px rgba(23, 27, 34, 0.06);
  --shadow-lg:    0 8px 24px rgba(23, 27, 34, 0.12), 0 2px 6px rgba(23, 27, 34, 0.08);
  --shadow-focus: 0 0 0 3px rgba(43, 82, 224, 0.28);

  /* -------------------------------------------------------------------------
     5. DENSITY — operator (default) vs comfortable
     Components read these for row heights, control heights, and insets.
     Toggle with [data-density="comfortable"] on <html> or a container.
     ------------------------------------------------------------------------- */
  --control-height:      30px;   /* buttons, inputs */
  --control-height-sm:   24px;
  --table-row-height:    34px;
  --inset-x:             var(--space-5);  /* 12px horizontal cell/control pad */
  --inset-y:             var(--space-4);  /* 8px  vertical */
  --card-padding:        var(--space-7);  /* 20px */

  /* -------------------------------------------------------------------------
     6. MOTION
     ------------------------------------------------------------------------- */
  --duration-instant: 50ms;
  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    320ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -------------------------------------------------------------------------
     7. Z-INDEX SCALE
     ------------------------------------------------------------------------- */
  --z-base:      0;
  --z-sticky:    100;   /* sticky table headers, topbar */
  --z-dropdown:  200;
  --z-drawer:    300;   /* slide-over panels */
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;
}

/* Comfortable density (profile/detail pages breathe more than queues) */
[data-density="comfortable"] {
  --control-height:   36px;
  --control-height-sm: 28px;
  --table-row-height: 44px;
  --inset-x:          var(--space-6);  /* 16px */
  --inset-y:          var(--space-5);  /* 12px */
  --card-padding:     var(--space-8);  /* 24px */
  --font-size-base:   14px;
}

/* ---------------------------------------------------------------------------
   8. DARK MODE — cool-neutral, reduced contrast (no pure black/white)
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg-primary:      #0f131a;
  --color-bg-secondary:    #161b24;
  --color-bg-tertiary:     #1d2430;
  --color-bg-elevated:     #1b212c;
  --color-bg-inverse:      #e6e9ef;
  --color-bg-hover:        #1c232f;
  --color-bg-selected:     #16233f;
  --color-bg-disabled:     #191e27;

  --color-text-primary:    #e6e9ef;
  --color-text-secondary:  #a3adbb;
  --color-text-tertiary:   #8791a0;   /* AA on dark card (4.5:1+) */
  --color-text-inverse:    #171b22;
  --color-text-link:       #8aa3f8;   /* AA on dark card; used for active tab too */
  --color-text-on-accent:  #ffffff;

  --color-border-primary:   #29313d;
  --color-border-secondary: #212934;
  --color-border-strong:    #3a4453;
  --color-border-focus:     #5b7bf5;

  --color-accent-primary:        #4d6ff2;
  --color-accent-primary-hover:  #6383f5;
  --color-accent-primary-active: #3a5ce0;
  --color-accent-subtle:         #16233f;
  --color-accent-subtle-text:    #a9bef9;
  --color-accent-secondary:      #2fb3bd;

  --color-status-success:      #35b56c;
  --color-status-success-bg:   #12281d;
  --color-status-success-text: #7fd6a3;
  --color-status-warning:      #d99a2b;
  --color-status-warning-bg:   #2c2411;
  --color-status-warning-text: #ecc07a;
  --color-status-error:        #e05656;
  --color-status-error-bg:     #2e1717;
  --color-status-error-text:   #ef9b9b;
  --color-status-info:         #4d8ae8;
  --color-status-info-bg:      #14202f;
  --color-status-info-text:    #9cc0f2;
  --color-status-neutral:      #8791a0;
  --color-status-neutral-bg:   #242b36;
  --color-status-neutral-text: #aeb7c4;

  --color-surface-overlay: rgba(6, 9, 13, 0.60);
  --color-surface-scrim:   rgba(255, 255, 255, 0.06);

  /* DPD / risk read slightly brighter on dark to hold contrast */
  --status-dpd-current: #35b56c;
  --status-dpd-1-30:    #d4b53a;
  --status-dpd-31-60:   #e08b39;
  --status-dpd-61-90:   #e06a41;
  --status-dpd-90plus:  #e05656;
  --risk-a: #35b56c;
  --risk-b: #96c23f;
  --risk-c: #d4b53a;
  --risk-d: #e08b39;
  --risk-e: #e05656;

  /* Dark shadows: deeper, more transparent, rely on borders for edges */
  --shadow-xs:    0 1px 1px rgba(0, 0, 0, 0.30);
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-focus: 0 0 0 3px rgba(91, 123, 245, 0.35);
}

/* System-preference dark, unless the user has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:      #0f131a;
    --color-bg-secondary:    #161b24;
    --color-bg-tertiary:     #1d2430;
    --color-bg-elevated:     #1b212c;
    --color-bg-inverse:      #e6e9ef;
    --color-bg-hover:        #1c232f;
    --color-bg-selected:     #16233f;
    --color-bg-disabled:     #191e27;

    --color-text-primary:    #e6e9ef;
    --color-text-secondary:  #a3adbb;
    --color-text-tertiary:   #8791a0;
    --color-text-inverse:    #171b22;
    --color-text-link:       #8aa3f8;

    --color-border-primary:   #29313d;
    --color-border-secondary: #212934;
    --color-border-strong:    #3a4453;
    --color-border-focus:     #5b7bf5;

    --color-accent-primary:        #4d6ff2;
    --color-accent-primary-hover:  #6383f5;
    --color-accent-primary-active: #3a5ce0;
    --color-accent-subtle:         #16233f;
    --color-accent-subtle-text:    #a9bef9;
    --color-accent-secondary:      #2fb3bd;

    --color-status-success:      #35b56c;
    --color-status-success-bg:   #12281d;
    --color-status-success-text: #7fd6a3;
    --color-status-warning:      #d99a2b;
    --color-status-warning-bg:   #2c2411;
    --color-status-warning-text: #ecc07a;
    --color-status-error:        #e05656;
    --color-status-error-bg:     #2e1717;
    --color-status-error-text:   #ef9b9b;
    --color-status-info:         #4d8ae8;
    --color-status-info-bg:      #14202f;
    --color-status-info-text:    #9cc0f2;
    --color-status-neutral:      #8791a0;
    --color-status-neutral-bg:   #242b36;
    --color-status-neutral-text: #aeb7c4;

    --color-surface-overlay: rgba(6, 9, 13, 0.60);
    --color-surface-scrim:   rgba(255, 255, 255, 0.06);

    --status-dpd-current: #35b56c;
    --status-dpd-1-30:    #d4b53a;
    --status-dpd-31-60:   #e08b39;
    --status-dpd-61-90:   #e06a41;
    --status-dpd-90plus:  #e05656;
    --risk-a: #35b56c;
    --risk-b: #96c23f;
    --risk-c: #d4b53a;
    --risk-d: #e08b39;
    --risk-e: #e05656;

    --shadow-xs:    0 1px 1px rgba(0, 0, 0, 0.30);
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg:    0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.40);
    --shadow-focus: 0 0 0 3px rgba(91, 123, 245, 0.35);
  }
}

/* ---------------------------------------------------------------------------
   9. GLOBAL BASE — minimal reset + token wiring so pages inherit correctly
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must win even when a class sets `display`
   (author display declarations otherwise override the UA [hidden] rule). */
[hidden] { display: none !important; }

html {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* Tabular figures everywhere numbers matter (money, dates, IDs, counts). */
.tabular-nums,
table, .amount, .kpi-value, time, .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

.mono { font-family: var(--font-family-mono); }

a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
  border-radius: var(--border-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}