/* ═══════════════════════════════════════════════════════════════════
   CENTINELA DESIGN SYSTEM — v2.1
   Single source of truth. Colors aligned with Industrial Premium base.
   Loaded AFTER skins.css for correct cascade against data-skin overrides.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS — Industrial Premium (default) ─────────────── */
html:not(.light):not([data-skin]):root {
  --bg:       #273040 !important;
  --bg2:      #2d3850 !important;
  --surface:  #2d3850 !important;
  --card:     #34405a !important;
  --card-h:   #3d4a66 !important;
  --card2:    #3d4a66 !important;

  --accent:   #4f8fff !important;
  --accent2:  #6366f1 !important;
  --accent-g: linear-gradient(135deg, #4f8fff, #6366f1) !important;

  --green:    #34d399 !important;
  --red:      #f87171 !important;
  --orange:   #fb923c !important;
  --yellow:   #fbbf24 !important;
  --cyan:     #22d3ee !important;
  --purple:   #a78bfa !important;
  --pink:     #f472b6 !important;

  --text:   #edf1f7 !important;
  --text2:  #c0c8d8 !important;
  --muted:  #9fb0c4 !important;
  --dim:    #7f93a9 !important;

  --border:  rgba(255,255,255,.10) !important;
  --border2: rgba(255,255,255,.15) !important;
  --border3: rgba(255,255,255,.22) !important;

  --glass: rgba(39,48,64,.92) !important;
}

/* ─── DESIGN TOKENS (universal — no !important so skins override) ─ */
:root {
  /* Spacing scale */
  --sp-0:  0;     --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; --sp-16: 64px;

  /* Radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* Typography */
  --t-xs:  10px;  --t-sm:  11px;  --t-md:  13px;  --t-lg:  15px;
  --t-xl:  18px;  --t-2xl: 24px;  --t-3xl: 32px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Font families */
  --font: 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono: 'JetBrains Mono','SF Mono','Fira Code',monospace;
  --hd:   'Outfit',var(--font);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,.18);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.28);
  --shadow-accent: 0 4px 20px rgba(79,143,255,.20);

  /* Motion */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── LIGHT MODE ────────────────────────────────────────────── */
html.light:not([data-skin]):root {
  --bg:      #f4f6f9 !important;
  --bg2:     #edf0f5 !important;
  --surface: #ffffff !important;
  --card:    #ffffff !important;
  --card-h:  #f8fafc !important;
  --card2:   #f0f2f5 !important;
  --accent:  #2b6fdb !important;
  --accent2: #6344d9 !important;
  --green:  #059669 !important;
  --red:    #dc2626 !important;
  --orange: #d97706 !important;
  --yellow: #b45309 !important;
  --text:  #1a202c !important;
  --text2: #374151 !important;
  --muted: #6b7280 !important;
  --dim:   #94a3b8 !important;
  --border:  rgba(0,0,0,.08) !important;
  --border2: rgba(0,0,0,.12) !important;
  --border3: rgba(0,0,0,.20) !important;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.12);
}

/* ─── GLOBAL BASE ─────────────────────────────────────────────── */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── SIDEBAR HARMONY ─────────────────────────────────────────── */
.sidebar { background: var(--bg2) !important; border-right: 1px solid var(--border) !important; }
.main    { background: var(--bg) !important; }
.sb-brand a > div:first-child {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: var(--accent) !important;
  opacity: .8 !important;
}
.sb-brand h2 { font-size: 14px !important; }
.sb-brand small { color: var(--muted) !important; }

/* ─── INPUT REFINEMENT ────────────────────────────────────────── */
input, select, textarea { font-family: var(--font); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(79,143,255,.15) !important;
}

/* ─── CARDS ───────────────────────────────────────────────────── */
.card, .kpi, .ch-card {
  transition: border-color var(--t-med), background var(--t-med), box-shadow var(--t-med);
}

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
html.light ::-webkit-scrollbar-thumb       { background: rgba(0,0,0,0.14); }
html.light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.26); }

/* ─── TOPBAR harmonized ──────────────────────────────────────── */
#ctnl-topbar {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

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

::selection { background: rgba(79,143,255,.30); color: var(--text); }

button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

a { transition: color var(--t-fast); }

/* ─── TABLE / BUTTON COMPONENTS (from legacy Hub v2) ─────────── */
html:not(.light):not([data-skin]) th {
  background: rgba(79,143,255,.06) !important;
  color: var(--text2) !important;
}
.btn, button.btn {
  border-color: rgba(79,143,255,.3);
  color: var(--accent);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn:hover {
  background: rgba(79,143,255,.1);
}

/* ─── COMPONENT LIBRARY — Buttons ─────────────────────────── */
.btn-primary {
  background: var(--accent-g);
  color: #fff;
  border: none;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: var(--t-md);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}
.btn-secondary {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: var(--t-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.btn-ghost:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
}

/* ─── COMPONENT LIBRARY — Badges ──────────────────────────── */
.ctnl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .3px;
  line-height: 1.3;
}
.ctnl-badge.success { background: rgba(52,211,153,.12); color: var(--green); }
.ctnl-badge.error   { background: rgba(248,113,113,.12); color: var(--red); }
.ctnl-badge.warning { background: rgba(251,146,60,.12); color: var(--orange); }
.ctnl-badge.info    { background: rgba(79,143,255,.12); color: var(--accent); }
.ctnl-badge.neutral { background: rgba(255,255,255,.04); color: var(--muted); }

/* ─── COMPONENT LIBRARY — Pills (for filters/tags) ────────── */
.ctnl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  background: rgba(255,255,255,.04);
  color: var(--text2);
  border: 1px solid var(--border);
  transition: background var(--t-fast), border-color var(--t-fast);
  cursor: pointer;
}
.ctnl-pill:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--border2);
}
.ctnl-pill.active {
  background: rgba(79,143,255,.10);
  color: var(--accent);
  border-color: rgba(79,143,255,.30);
}

/* ─── COMPONENT LIBRARY — KPI blocks ──────────────────────── */
.ctnl-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: border-color var(--t-med), background var(--t-med);
}
.ctnl-kpi:hover { border-color: var(--border2); }
.ctnl-kpi-label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}
.ctnl-kpi-value {
  font-family: var(--hd);
  font-size: var(--t-2xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1;
}
.ctnl-kpi-trend {
  font-size: var(--t-sm);
  margin-top: var(--sp-2);
}
.ctnl-kpi-trend.up   { color: var(--green); }
.ctnl-kpi-trend.down { color: var(--red); }

/* ─── Table refinement (global) ──────────────────────────── */
table.ctnl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-md);
}
table.ctnl-table th {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border2);
}
table.ctnl-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}
table.ctnl-table tr:hover td {
  background: rgba(255,255,255,.02);
  color: var(--text);
}