/* ============================================================
   BLUN dashboard v2 — cream + espresso + BLUN blue
   Loaded LAST so it wins over per-page :root vars.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Hanken+Grotesk:wght@300..800&display=swap');

:root, .shell, body, html {
  /* core surface */
  --bg:  oklch(0.965 0.008 75);
  --bg2: oklch(0.985 0.006 75);
  --bg3: oklch(0.95 0.01 75);
  --bg4: oklch(0.92 0.012 75);
  --surface:  #ffffff;
  --surface2: oklch(0.97 0.008 75);
  --surface3: oklch(0.93 0.012 75);

  /* lines / borders */
  --brd:  oklch(0.88 0.012 75);
  --border: oklch(0.88 0.012 75);
  --border-soft: oklch(0.92 0.01 75);

  /* text */
  --tx:  oklch(0.22 0.02 280);
  --tx2: oklch(0.42 0.018 280);
  --tx3: oklch(0.55 0.014 280);
  --text:  oklch(0.22 0.02 280);
  --muted: oklch(0.55 0.014 280);
  --ink:   oklch(0.22 0.02 280);
  --ink-2: oklch(0.42 0.018 280);
  --ink-3: oklch(0.55 0.014 280);

  /* accent — BLUN blue */
  --b:  oklch(0.55 0.18 265);
  --bd: oklch(0.55 0.18 265);
  --blue: oklch(0.55 0.18 265);
  --accent: oklch(0.55 0.18 265);
  --accent-ink: oklch(0.45 0.2 265);
  --accent-soft: oklch(0.93 0.08 265);

  /* state colors */
  --green: oklch(0.6 0.18 150);
  --red:   oklch(0.6 0.22 25);
  --amber: oklch(0.78 0.16 75);
  --purple:oklch(0.6 0.2 295);
  --ok:     oklch(0.6 0.18 150);
  --danger: oklch(0.6 0.22 25);
  --warn:   oklch(0.78 0.16 75);

  /* neutrals */
  --white: #ffffff;
  --black: #1a1410;

  /* fonts */
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* radii */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* shadows */
  --sh-1: 0 1px 2px oklch(0.2 0.02 280 / 0.05), 0 1px 3px oklch(0.2 0.02 280 / 0.04);
  --sh-2: 0 4px 12px oklch(0.2 0.02 280 / 0.08);
  --sh-3: 0 16px 48px oklch(0.2 0.02 280 / 0.12);
}

/* base typography */
html, body {
  background: var(--bg) !important;
  color: var(--tx) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}
h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
  color: var(--tx);
}

/* SIDEBAR — was dark, make it cream + sharp */
.sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--brd) !important;
  color: var(--tx) !important;
}
.sidebar-head {
  border-bottom: 1px solid var(--border-soft) !important;
}
.sidebar-logo {
  color: var(--tx) !important;
  font-family: var(--font-display) !important;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.sidebar-logo span {
  color: var(--b) !important;
}
.sidebar-user, .sidebar-meta {
  color: var(--tx2) !important;
}
.nav-section {
  color: var(--tx3) !important;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.nav-item {
  color: var(--tx2) !important;
  border-left-color: transparent !important;
  border-radius: 0 !important;
  font-weight: 500;
}
.nav-item:hover {
  background: var(--bg3) !important;
  color: var(--tx) !important;
}
.nav-item.active {
  color: var(--b) !important;
  background: var(--accent-soft) !important;
  border-left: 3px solid var(--b) !important;
  font-weight: 600;
}
.sidebar-collapse-btn {
  color: var(--tx2) !important;
  border: 1px solid transparent !important;
}
.sidebar-collapse-btn:hover {
  color: var(--tx) !important;
  background: var(--bg3) !important;
  border-color: var(--brd) !important;
}

/* TOPBAR */
.topbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--brd) !important;
  color: var(--tx) !important;
}
.topbar-logo {
  color: var(--b) !important;
  font-family: var(--font-display) !important;
}
.topbar-project, .topbar-btn {
  background: var(--surface2) !important;
  border: 1px solid var(--brd) !important;
  color: var(--tx2) !important;
  border-radius: var(--r-2) !important;
}
.topbar-btn:hover, .topbar-project:hover {
  border-color: var(--b) !important;
  color: var(--tx) !important;
}
.topbar-btn.active {
  color: var(--b) !important;
  border-color: var(--b) !important;
  background: var(--accent-soft) !important;
}
.back-link {
  color: var(--tx2) !important;
}
.back-link:hover {
  color: var(--tx) !important;
}

/* CARDS / SURFACES (heuristic — most app pages use class names ending in -card or .card) */
.card, .panel, .tile, .mock-card,
.kanban-col, .kanban-card, .agent-card,
.modal, .modal-content, .mod-content {
  background: var(--surface) !important;
  border: 1px solid var(--brd) !important;
  color: var(--tx) !important;
  border-radius: var(--r-3) !important;
  box-shadow: var(--sh-1);
}

/* INPUTS */
input, textarea, select {
  background: var(--surface) !important;
  border: 1px solid var(--brd) !important;
  color: var(--tx) !important;
  border-radius: var(--r-2) !important;
  font-family: var(--font-sans) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--b) !important;
  box-shadow: 0 0 0 3px oklch(0.55 0.18 265 / 0.12) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--tx3) !important; }

/* BUTTONS — preserve existing layout, retint to v2 */
button:not(.cf-dot):not(.nav-burger):not(.topbar-btn):not(.mode-btn):not(.btn):not(.sidebar-collapse-btn) {
  font-family: var(--font-sans) !important;
}
.btn-primary, .primary, button.primary {
  background: var(--b) !important;
  color: #fff !important;
  border: 1px solid var(--b) !important;
  border-radius: var(--r-pill) !important;
  font-weight: 600;
}
.btn-primary:hover, .primary:hover, button.primary:hover {
  background: oklch(0.5 0.2 265) !important;
  border-color: oklch(0.5 0.2 265) !important;
}
.btn-secondary, .secondary {
  background: var(--surface) !important;
  color: var(--tx) !important;
  border: 1px solid var(--brd) !important;
  border-radius: var(--r-pill) !important;
}
.btn-ghost, .ghost {
  background: transparent !important;
  color: var(--tx2) !important;
  border: 1px solid var(--brd) !important;
  border-radius: var(--r-pill) !important;
}

/* SCROLLBARS */
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: var(--bg4) !important; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx3) !important; }

/* TERMINAL / CODE editor surfaces — keep dark for readability */
.terminal-output, .terminal-area, .code-editor, .monaco-editor,
.terminal-input, pre.code, code.block {
  background: oklch(0.18 0.015 280) !important;
  color: oklch(0.92 0.005 75) !important;
  font-family: var(--font-mono) !important;
}
.terminal-output, .terminal-input { border-radius: var(--r-2); }

/* MOBILE responsive — collapse sidebar */
@media (max-width: 880px) {
  .shell { flex-direction: column !important; }
  .sidebar {
    position: fixed !important;
    top: 0; left: -260px;
    width: 260px !important;
    height: 100vh !important;
    z-index: 100;
    transition: left 0.25s ease !important;
    box-shadow: var(--sh-3);
  }
  .sidebar.open, .sidebar.mobile-open {
    left: 0 !important;
  }
  .topbar, .main-topbar, .app-topbar {
    padding: 0 12px !important;
    height: 52px !important;
  }
  .main, .main-content, .content {
    padding: 12px !important;
  }
  /* show a burger on mobile if not present */
  .mobile-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--brd);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--tx);
  }
}
@media (min-width: 881px) {
  .mobile-burger { display: none !important; }
}

/* generic .badge polish */
.badge, .pill, .tag {
  font-family: var(--font-sans) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* fix any leftover hardcoded dark backgrounds (common offenders) */
[style*="background:#111"], [style*="background:#1E2744"], [style*="background:#1e2744"],
[style*="background-color:#111"], [style*="background-color:#1E2744"] {
  background: var(--surface) !important;
  color: var(--tx) !important;
}