/* ============================================================
   BASE.CSS — CSS Variables, Reset, Typography
   PixelPLUS V2
============================================================ */

/* ── DARK THEME (default) ───────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-primary:    #181a24;
  --bg-secondary:  #21242f;
  --bg-card:       #2d3142;
  --bg-hover:      #383c4a;
  --bg-input:      #21242f;

  --sidebar-bg:    #21242f;
  --topbar-bg:     #2d3142;

  --text-primary:  #f0f0f5;
  --text-secondary:#c0c4d8;
  --text-muted:    #a0a4b8;

  --accent:        #0079c1;
  --accent-hover:  #1a8fd6;
  --accent-dim:    rgba(0,121,193,0.15);

  --border:        #383c4a;
  --border-light:  #2d3142;

  --success:       #27ae60;
  --success-dim:   rgba(39,174,96,0.12);
  --danger:        #e74c3c;
  --danger-dim:    rgba(231,76,60,0.12);
  --warning:       #f39c12;
  --warning-dim:   rgba(243,156,18,0.12);
  --info:          #3498db;
  --info-dim:      rgba(52,152,219,0.12);

  --shadow:        0 2px 12px rgba(0,0,0,0.4);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);
  --radius:        8px;
  --radius-lg:     12px;
}

/* ── LIGHT THEME ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:    #f4f4f8;
  --bg-secondary:  #ffffff;
  --bg-card:       #ffffff;
  --bg-hover:      #f0f0f8;
  --bg-input:      #f8f8fc;

  --sidebar-bg:    #f0f0f8;
  --topbar-bg:     #ffffff;

  --text-primary:  #111827;
  --text-secondary:#374151;
  --text-muted:    #6b7280;

  --accent:        #0079c1;
  --accent-hover:  #005f99;
  --accent-dim:    rgba(0,121,193,0.12);

  /* Sidebar nav colors for light mode */
  --nav-text:       #374151;
  --nav-hover-bg:   rgba(0,121,193,0.08);
  --nav-hover-text: #111827;
  --sidebar-border: rgba(0,0,0,0.08);
  --nav-label-color: #9ca3af;

  --border:        #e0e0ec;
  --border-light:  #f0f0f8;

  --success:       #219a52;
  --success-dim:   rgba(33,154,82,0.10);
  --danger:        #c0392b;
  --danger-dim:    rgba(192,57,43,0.10);
  --warning:       #d68910;
  --warning-dim:   rgba(214,137,16,0.10);
  --info:          #2980b9;
  --info-dim:      rgba(41,128,185,0.10);

  --shadow:        0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.12);
}

/* ── FONT SIZE SCALES ────────────────────────────────────── */
[data-fontsize="small"]  { font-size: 14px; }
[data-fontsize="medium"] { font-size: 15px; }
[data-fontsize="large"]  { font-size: 17px; }

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Arial', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

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

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

ul, ol { list-style: none; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1 { font-size: 1.8em; font-weight: 700; }
h2 { font-size: 1.4em; font-weight: 600; }
h3 { font-size: 1.2em; font-weight: 600; }
h4 { font-size: 1.0em; font-weight: 600; }

.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-accent   { color: var(--accent); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }

.bold   { font-weight: 700; }
.mono   { font-family: 'Courier New', monospace; }
.small  { font-size: 0.85em; }
.large  { font-size: 1.15em; }

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }