/* ═══════════════════════════════════════
   BASE.CSS — Variables, Layout, Typography
   ═══════════════════════════════════════ */

/* THEME VARIABLES */
[data-theme="light"] {
  --bg:       #f5f2eb;
  --bg2:      #eeebe2;
  --surface:  #edeae1;
  --surface2: #e5e0d5;
  --border:   #d4cebc;
  --border2:  #c2bba8;
  --ink:      #1a1814;
  --muted:    #52493a;   /* was #8c8570 — boosted for readability */
  --muted2:   #6e6252;   /* was #b0a990 — boosted for readability */
  --card-bg:  #edeae1;
  --card-hover: #e5e0d5;
  --popup-bg: #f5f2eb;
  --shadow:   rgba(26,24,20,0.12);
}

[data-theme="dark"] {
  --bg:        #181a20;
  --bg2:       #1e2128;

  --surface:   #23262f;
  --surface2:  #2a2e39;

  --border:    #323644;
  --border2:   #3f4454;

  --ink:       #f2f4f8;

  --muted:     #aeb6c6;
  --muted2:    #8f96a8;

  --card-bg:   #23262f;
  --card-hover:#2d3140;

  --popup-bg:  #1f222b;

  --shadow:    rgba(0,0,0,0.45);
}

/* COLOUR PALETTE */
:root {
  --green:   #22c55e; --green-bg:  #ecfdf3;
  --yellow:  #facc15; --yellow-bg: #fefce8;
  --red:     #ef4444; --red-bg:    #fef2f2;
  --blue:    #3b82f6; --blue-bg:   #eff6ff;
  --purple:  #8b5cf6; --purple-bg: #f5f3ff;
  --orange:  #f97316; --orange-bg: #fff7ed;
  --teal:    #14b8a6; --teal-bg:   #f0fdfa;
  --pink:    #ec4899; --pink-bg:   #fdf2f8;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  min-height: 100vh;
  transition: background .3s, color .3s;
  letter-spacing: 0.15px;
  line-height: 1.5;
}

/* LAYOUT */
.site {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
}
.main { flex: 1; padding: 28px 36px; overflow-x: hidden; }

/* TABS */
.tab-pane  { display: none; }
.tab-pane.active { display: block; }

/* PAGE HEADER */
.page-header {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4.5vw, 58px);
  letter-spacing: .03em; line-height: .95; color: var(--ink);
}
.page-title em { font-style: normal; -webkit-text-stroke: 2px var(--ink); color: transparent; }
.page-sub { font-size: 12px; color: var(--muted); margin-top: 7px; letter-spacing: .05em; line-height: 1.6; }

/* SECTION LABEL */
.slabel {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted2); margin-bottom: 9px;
  display: flex; align-items: center; gap: 9px;
}
.slabel::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* PILLS */
.pill-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.pill {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 5px 14px;
  font-size: 10px; letter-spacing: .06em; color: var(--muted);
  cursor: pointer; transition: all .18s;
  font-family: 'IBM Plex Mono', monospace;
}
.pill:hover  { border-color: var(--border2); color: var(--ink); background: var(--surface2); }
.pill.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* EMPTY STATE */
.empty-state {
  text-align: center; padding: 52px 20px; color: var(--muted);
  border: 1.5px dashed var(--border); border-radius: 8px; background: var(--surface);
}
.empty-state .ei { font-size: 32px; margin-bottom: 9px; opacity: .6; }
.empty-state p   { font-size: 12px; line-height: 1.8; color: var(--muted); }

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* RESPONSIVE */
@media (max-width: 800px) {
  .site { grid-template-columns: 1fr; }
  .main { padding: 16px; }
}

.card,
.popup,
.panel {
  box-shadow: 0 2px 6px var(--shadow);
}

.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--shadow);
}