/* ============================================================
   ACTIVATED — Design Tokens
   Internal payments admin · Hebrew-first RTL fintech system
   ============================================================ */

:root {
  /* ---- Brand / Indigo ---- */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;  /* primary */
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --indigo-950: #1e1b4b;

  --primary:        var(--indigo-600);
  --primary-hover:  var(--indigo-700);
  --primary-soft:   var(--indigo-50);
  --primary-ring:   rgba(79, 70, 229, 0.35);

  /* ---- Status ---- */
  --success:      #16a34a;
  --success-soft: #dcfce7;
  --success-text: #15803d;
  --revenue:      #16a34a;

  --warning:      #d97706;
  --warning-soft: #fef3c7;
  --warning-text: #b45309;

  --danger:       #dc2626;
  --danger-soft:  #fee2e2;
  --danger-text:  #b91c1c;

  --info:         #2563eb;
  --info-soft:    #dbeafe;
  --info-text:    #1d4ed8;

  --neutral-badge-soft: #f1f5f9;
  --neutral-badge-text: #475569;

  /* ---- Neutrals (slate) ---- */
  --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;

  /* ---- Semantic surface tokens (LIGHT content area) ---- */
  --bg-app:        #f4f5fb;       /* app canvas behind cards */
  --bg-surface:    #ffffff;       /* cards, panels */
  --bg-surface-2:  #f8fafc;       /* subtle inset / table header */
  --bg-hover:      #f4f5fb;
  --border:        #e7e9f3;
  --border-strong: #d8dbec;
  --text-strong:   #11142b;
  --text:          #2c3050;
  --text-muted:    #6b7191;
  --text-faint:    #9aa0bf;
  --on-primary:    #ffffff;

  /* ---- Sidebar (deep indigo, always dark) ---- */
  --side-bg:        #1e1b4b;
  --side-bg-2:      #211e52;
  --side-border:    rgba(255,255,255,0.08);
  --side-text:      #c7cbf0;
  --side-text-dim:  #8a8fc7;
  --side-active-bg: rgba(255,255,255,0.10);
  --side-active-bar:#a5b4fc;
  --side-accent:    #818cf8;

  /* ---- Type scale ---- */
  --font: "Heebo", "Assistant", -apple-system, "Segoe UI", sans-serif;
  --fs-display: 30px;
  --fs-h1:   24px;
  --fs-h2:   19px;
  --fs-h3:   16px;
  --fs-body: 14px;
  --fs-sm:   13px;
  --fs-xs:   12px;
  --fs-2xs:  11px;

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

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Radii ---- */
  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-xs: 0 1px 2px rgba(17, 20, 43, 0.06);
  --sh-sm: 0 1px 3px rgba(17, 20, 43, 0.08), 0 1px 2px rgba(17,20,43,0.04);
  --sh-md: 0 4px 14px rgba(17, 20, 43, 0.08);
  --sh-lg: 0 12px 34px rgba(17, 20, 43, 0.14);
  --sh-pop:0 16px 48px rgba(17, 20, 43, 0.22);

  /* ---- Layout ---- */
  --sidebar-w: 256px;
  --topbar-h: 64px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- DARK content area variant ---- */
:root[data-theme="dark"] {
  --bg-app:        #0c0d1a;
  --bg-surface:    #15172b;
  --bg-surface-2:  #1b1d36;
  --bg-hover:      #1d2040;
  --border:        #262a4d;
  --border-strong: #313662;
  --text-strong:   #f3f4ff;
  --text:          #d3d6f0;
  --text-muted:    #9aa0c8;
  --text-faint:    #6a7099;

  --primary-soft:  rgba(99,102,241,0.16);
  --success-soft:  rgba(22,163,74,0.18);
  --success-text:  #4ade80;
  --warning-soft:  rgba(217,119,6,0.18);
  --warning-text:  #fbbf24;
  --danger-soft:   rgba(220,38,38,0.18);
  --danger-text:   #f87171;
  --info-soft:     rgba(37,99,235,0.18);
  --info-text:     #93c5fd;
  --neutral-badge-soft: #232745;
  --neutral-badge-text: #aab0d4;

  --side-bg:   #121327;
  --side-bg-2: #16182f;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* numbers / references always read LTR even in RTL layout */
.lat { direction: ltr; unicode-bidi: isolate; }

/* ============================================================
   Reusable primitives
   ============================================================ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.btn {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease), transform .05s var(--ease);
  line-height: 1;
}
.btn:active { transform: translateY(0.5px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 12px var(--primary-ring); }

.btn-ghost { background: var(--bg-surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--slate-400); }

.btn-subtle { background: transparent; color: var(--text-muted); }
.btn-subtle:hover { background: var(--bg-hover); color: var(--text); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.94); }

.btn-sm { padding: 6px 11px; font-size: var(--fs-xs); }
.btn-sm svg { width: 14px; height: 14px; }

.input {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--text-strong);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 9px 12px;
  width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  outline: none;
}
.input::placeholder { color: var(--text-faint); }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }

/* ---- Status badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 3px 10px 3px 9px;
  border-radius: var(--r-pill);
  line-height: 1.5;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-success { background: var(--success-soft); color: var(--success-text); }
.badge-warning { background: var(--warning-soft); color: var(--warning-text); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger-text); }
.badge-info    { background: var(--info-soft);    color: var(--info-text); }
.badge-neutral { background: var(--neutral-badge-soft); color: var(--neutral-badge-text); }

/* tabular numbers for money/dates */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skel {
  background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--border) 37%, var(--bg-surface-2) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: 6px;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drawerInRTL { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes drawerInLTR { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }