/* assets/css/design-system.css */
/* Core design system variables, resets, and shared utility selectors */

:root {
  --bg: #0a0b0d;
  --bg-2: #111318;
  --panel: #16181d;
  --panel-hover: #1c1e24;
  --line: #24262d;
  --line-light: #2e3038;
  --ink: #f3f4f2;
  --ink-2: #cdd0d5;
  --muted: #8a8d95;
  
  --accent: #174081;
  --accent-dim: rgba(23,64,129,.12);
  --accent-glow: rgba(23,64,129,.4);
  --accent-ink: #ffffff;
  
  --success: #34d399;
  --success-dim: rgba(52,211,153,.12);
  --warning: #fbbf24;
  --warning-dim: rgba(251,191,36,.12);
  --danger: #ff5a3c;
  --danger-dim: rgba(255,90,60,.12);
  --info: #60a5fa;
  --info-dim: rgba(96,165,250,.12);
  
  --sidebar-w: 260px;
  --header-h: 64px;
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 8px 32px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.55);
}

:root.light-mode, html.light-mode {
  --bg: #f4f6f8;
  --bg-2: #eaedf1;
  --panel: #ffffff;
  --panel-hover: #f1f3f6;
  --line: #e1e4e9;
  --line-light: #cfd3dc;
  --ink: #0e1116;
  --ink-2: #3a3f47;
  --muted: #6e737e;
  
  --accent: #1f59c4;
  --accent-glow: rgba(31, 89, 196, 0.25);
  --accent-dim: rgba(31, 89, 196, 0.08);
  --accent-ink: #ffffff;
  
  --success: #059669;
  --success-dim: rgba(5, 150, 105, 0.08);
  --warning: #d97706;
  --warning-dim: rgba(217, 119, 6, 0.08);
  --danger: #dc2626;
  --danger-dim: rgba(220, 38, 38, 0.08);
  --info: #2563eb;
  --info-dim: rgba(37, 99, 235, 0.08);
  
  --shadow: 0 8px 32px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.1);
}

/* ============================================================
   GLOBAL RESETS
   ============================================================ */
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html { 
  scroll-behavior: smooth; 
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
}

a { 
  color: inherit; 
  text-decoration: none; 
}

img { 
  display: block; 
  max-width: 100%; 
}

button { 
  font-family: inherit; 
  cursor: pointer; 
}

input, select, textarea { 
  font-family: inherit; 
}

.cond { 
  font-family: "Saira Condensed", sans-serif; 
}

/* Scrollbars */
::-webkit-scrollbar { 
  width: 6px; 
  height: 6px; 
}

::-webkit-scrollbar-track { 
  background: var(--bg); 
}

::-webkit-scrollbar-thumb { 
  background: var(--line); 
  border-radius: 99px; 
}

::-webkit-scrollbar-thumb:hover { 
  background: var(--muted); 
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle-btn {
  background: var(--panel); 
  border: 1px solid var(--line);
  color: var(--ink); 
  width: 40px; 
  height: 40px; 
  border-radius: var(--r-sm);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: .18s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-width: 40px;
}

.theme-toggle-btn:hover { 
  border-color: var(--accent); 
  color: var(--accent); 
}

.theme-toggle-btn svg { 
  width: 20px; 
  height: 20px; 
}

/* ============================================================
   SHARED UTILITIES & BADGES
   ============================================================ */
.badge {
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
  padding: 4px 10px;
  border-radius: 999px; 
  font-family: "Saira Condensed"; 
  font-weight: 600;
  font-size: 12px; 
  text-transform: uppercase; 
  letter-spacing: .08em;
}

.badge::before {
  content: ''; 
  width: 6px; 
  height: 6px; 
  border-radius: 50%;
  background: currentColor; 
  flex-shrink: 0;
}

.badge-success { background: var(--success-dim); color: var(--success); }
.badge-warning { background: var(--warning-dim); color: var(--warning); }
.badge-danger { background: var(--danger-dim); color: var(--danger); }
.badge-info { background: var(--info-dim); color: var(--info); }
.badge-muted { background: rgba(138,141,149,.12); color: var(--muted); }
.badge-accent { background: var(--accent-dim); color: var(--accent); }