/* Nexikos Design System v0.76.00
   Canonical semantic layer. Loaded after the legacy compatibility sheet.
   New UI must use semantic tokens below; legacy aliases are kept for migration. */
:root,
html[data-theme="dark"]{
  color-scheme:dark;
  --nx-bg:#0B0E14;
  --nx-surface:#12161F;
  --nx-surface-raised:#171C27;
  --nx-text:#EDEFF5;
  --nx-text-muted:#8A93A6;
  --nx-border:rgba(255,255,255,.10);
  --nx-accent:#4C8DFF;
  --nx-accent-hover:#3478F6;
  --nx-accent-soft:rgba(76,141,255,.15);
  --nx-success:#37D399;
  --nx-warning:#F5A623;
  --nx-danger:#FF6B6B;
  --nx-credit:#B892FF;
  --nx-info:#4C8DFF;
  --nx-shadow:0 10px 30px rgba(0,0,0,.35);
  --nx-radius-sm:10px;
  --nx-radius-md:16px;
  --nx-radius-lg:20px;
  /* compatibility aliases */
  --bg:var(--nx-bg);--panel:var(--nx-surface);--ink:var(--nx-text);--muted:var(--nx-text-muted);
  --line:var(--nx-border);--primary:var(--nx-accent);--primary2:var(--nx-accent-hover);
  --ok:var(--nx-success);--warn:var(--nx-warning);--bad:var(--nx-danger);--credit:var(--nx-credit);
  --shadow:var(--nx-shadow);--radius:var(--nx-radius-md);--soft:rgba(255,255,255,.04);
}
html[data-theme="light"]{
  color-scheme:light;
  --nx-bg:#F4F7FB;
  --nx-surface:#FFFFFF;
  --nx-surface-raised:#F8FAFC;
  --nx-text:#162033;
  --nx-text-muted:#6B7280;
  --nx-border:#E5EAF1;
  --nx-accent:#2563EB;
  --nx-accent-hover:#1D4ED8;
  --nx-accent-soft:#EAF1FF;
  --nx-success:#0F9F6E;
  --nx-warning:#D97706;
  --nx-danger:#DC2626;
  --nx-credit:#7C3AED;
  --nx-info:#2563EB;
  --nx-shadow:0 10px 35px rgba(15,23,42,.07);
  --bg:var(--nx-bg);--panel:var(--nx-surface);--ink:var(--nx-text);--muted:var(--nx-text-muted);
  --line:var(--nx-border);--primary:var(--nx-accent);--primary2:var(--nx-accent-hover);
  --ok:var(--nx-success);--warn:var(--nx-warning);--bad:var(--nx-danger);--credit:var(--nx-credit);
  --shadow:var(--nx-shadow);--radius:var(--nx-radius-md);--soft:var(--nx-surface-raised);
}
/* One visual identity across themes: accent means action/navigation, never status. */
.btn-primary,.mobile-fab{background:var(--nx-accent)!important;color:#fff!important;box-shadow:0 8px 20px color-mix(in srgb,var(--nx-accent) 24%,transparent)!important}
.btn-primary:hover{background:var(--nx-accent-hover)!important}
.link-btn,.app-version{color:var(--nx-accent)!important}
.nav-item.active{background:var(--nx-accent-soft)!important;color:var(--nx-text)!important;box-shadow:inset 3px 0 var(--nx-accent)!important}
.sidebar .nav-item.active{color:#fff!important}
.nav-item.active span,.sidebar .nav-item.active span{color:color-mix(in srgb,var(--nx-accent) 72%,white)!important}
.command-result:hover,.command-result.is-active{background:var(--nx-accent-soft)!important}
.command-result-icon,.fintech-round-search{background:var(--nx-accent-soft)!important;color:var(--nx-accent)!important}
.payment-bar-paid,.bar-paid{background:var(--nx-accent)!important}
/* Semantic statuses are theme-independent in meaning. */
.badge-ok,.badge-active,.status-ok{background:color-mix(in srgb,var(--nx-success) 16%,transparent)!important;color:var(--nx-success)!important}
.badge-open,.badge-warn,.status-warn{background:color-mix(in srgb,var(--nx-warning) 16%,transparent)!important;color:var(--nx-warning)!important}
.badge-due,.status-bad,.status-danger{background:color-mix(in srgb,var(--nx-danger) 16%,transparent)!important;color:var(--nx-danger)!important}
.badge-credit,.status-credit{background:color-mix(in srgb,var(--nx-credit) 16%,transparent)!important;color:var(--nx-credit)!important}
.control-item.ok .control-icon{background:color-mix(in srgb,var(--nx-success) 16%,transparent)!important;color:var(--nx-success)!important}
.control-item.warn .control-icon{background:color-mix(in srgb,var(--nx-warning) 16%,transparent)!important;color:var(--nx-warning)!important}
.control-item.bad .control-icon{background:color-mix(in srgb,var(--nx-danger) 16%,transparent)!important;color:var(--nx-danger)!important}
/* New components should use these helpers instead of hard-coded theme colors. */
.nx-surface{background:var(--nx-surface);color:var(--nx-text);border:1px solid var(--nx-border)}
.nx-muted{color:var(--nx-text-muted)}
.nx-status-success{color:var(--nx-success)}.nx-status-warning{color:var(--nx-warning)}
.nx-status-danger{color:var(--nx-danger)}.nx-status-credit{color:var(--nx-credit)}