/* ═══════════════════════════════════════════════════════════════════════════
   monytr.ai — Design Tokens
   Single source of truth for colors, fonts, spacing, radii, shadows.
   Loaded BEFORE Bootstrap and any per-page styles.
   Dark mode flips ONLY the neutral tokens (brand stays brand in both modes).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand (sky-blue) — same in both light + dark modes ── */
  --brand-50:  #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-200: #BAE6FD;
  --brand-300: #7DD3FC;
  --brand-400: #38BDF8;
  --brand-500: #0EA5E9;   /* primary */
  --brand-600: #0284C7;
  --brand-700: #0369a1;
  --brand-800: #075985;
  --brand-900: #0A1729;   /* deepest navy */

  /* aliases for legibility in templates */
  --brand:        var(--brand-500);
  --brand-dark:   var(--brand-600);
  --brand-light:  var(--brand-300);
  --brand-faint:  var(--brand-100);
  --navy:         var(--brand-900);
  /* A mid navy that predates this palette and is used in 50+ places
     for gradients, headings and rules. Named rather than removed:
     it is a real colour in this product, it just had no name. */
  --navy-mid:     #0D3C6E;

  /* ── Neutrals — LIGHT MODE defaults ── */
  --bg:          #ffffff;          /* page background */
  --bg-soft:     #f8fafc;          /* subtle alternate background */
  --bg-muted:    #f1f5f9;          /* table headers, hover rows */
  --surface:     #ffffff;          /* cards */
  --surface-2:   #f8fafc;          /* nested cards */
  --border:      #e2e8f0;          /* default border */
  --border-strong:#cbd5e1;
  --text:        #0f172a;          /* primary text */
  --text-muted:  #64748b;          /* secondary text */
  --text-faint:  #94a3b8;          /* tertiary / placeholder */
  --link:        var(--brand-600);
  --link-hover:  var(--brand-700);

  /* ── Status palette — slightly brighter in light, slightly muted in dark ── */
  --success:     #16a34a;
  --success-bg:  #dcfce7;
  --success-border: #bbf7d0;
  --danger:      #dc2626;
  --danger-bg:   #fee2e2;
  --danger-border:#fecaca;
  --warning:     #d97706;
  --warning-bg:  #fef3c7;
  --warning-border:#fde68a;
  --info:        var(--brand-500);
  --info-bg:     var(--brand-50);
  --info-border: var(--brand-200);

  /* ── Type ── */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Menlo, Monaco, Consolas, 'Courier New', monospace;
  --font-log:     'Cascadia Code', 'Fira Code', Consolas, monospace;

  --fs-xs:        11.5px;
  --fs-sm:        13px;
  --fs-base:      14px;
  --fs-md:        15px;
  --fs-lg:        17px;
  --fs-xl:        20px;
  --fs-2xl:       24px;
  --fs-3xl:       30px;

  --lh-tight:     1.25;
  --lh-base:      1.5;
  --lh-loose:     1.7;

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

  /* ── Layout ── */
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-7:      32px;
  --space-8:      40px;
  --space-card:   var(--space-6);

  --shadow-xs:    0 1px 1px rgba(15,23,42,.04);
  --shadow-sm:    0 1px 2px rgba(15,23,42,.06);
  --shadow:       0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.05);
  --shadow-md:    0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:    0 12px 32px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.06);

  /* ── Sidebar / topbar dimensions ── */
  --sidebar-w:    240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:     56px;

  /* ── Transitions ── */
  --t-fast:       120ms ease;
  --t:            180ms ease;
  --t-slow:       320ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — flip neutrals only. Brand colors stay constant.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  --bg:           #0f172a;
  --bg-soft:      #1e293b;
  --bg-muted:     #263447;
  --surface:      #1e293b;
  --surface-2:    #263447;
  --border:       #334155;
  --border-strong:#475569;
  --text:         #e2e8f0;
  --text-muted:   #94a3b8;
  --text-faint:   #64748b;
  --link:         var(--brand-400);
  --link-hover:   var(--brand-300);

  --success-bg:   rgba(22,163,74,.12);
  --success-border:rgba(22,163,74,.30);
  --danger-bg:    rgba(220,38,38,.12);
  --danger-border:rgba(220,38,38,.30);
  --warning-bg:   rgba(217,119,6,.14);
  --warning-border:rgba(217,119,6,.32);
  --info-bg:      rgba(14,165,233,.10);
  --info-border:  rgba(14,165,233,.28);

  --shadow-xs:    0 1px 1px rgba(0,0,0,.30);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.35);
  --shadow:       0 2px 4px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
  --shadow-md:    0 6px 18px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.30);
  --shadow-lg:    0 14px 40px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL TYPE — apply Inter everywhere consistently.
   The !important is necessary because Bootstrap injects its own font-family.
   ═══════════════════════════════════════════════════════════════════════════ */
html, body {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body, .table, .card, .form-control, .form-select, .btn, input, select, textarea, .modal, .dropdown-menu, .toast {
  font-family: var(--font-sans) !important;
}
code, pre, kbd, samp, .font-mono {
  font-family: var(--font-mono) !important;
}
.log-line, .log-output {
  font-family: var(--font-log) !important;
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
}