/* ButterStack design-system bridge for the Jekyll blog.
 *
 * The Rails app loads --bs-* tokens via app/assets/stylesheets/
 * design-system.css. The blog is a standalone Jekyll bundle that
 * doesn't get that file, so this stylesheet mirrors the same tokens
 * locally and uses them throughout the blog chrome and content.
 *
 * Loaded after assets/css/style.css (the precompiled Tailwind blob)
 * so its declarations win on conflicting class targets. */

:root {
  --bs-brand-purple:        oklch(48% 0.22 295);
  --bs-brand-purple-soft:   oklch(95% 0.04 295);
  --bs-brand-purple-strong: oklch(38% 0.22 295);
  --bs-brand-yellow:        oklch(85% 0.18 95);

  --bs-bg-app:        oklch(15% 0.012 250);
  --bs-bg-panel:      oklch(19% 0.014 250);
  --bs-bg-panel-2:    oklch(22% 0.015 250);
  --bs-bg-row-hover:  oklch(24% 0.016 250);
  --bs-line:          oklch(28% 0.018 250);
  --bs-line-strong:   oklch(34% 0.020 250);

  --bs-fg:            oklch(96% 0.005 250);
  --bs-fg-soft:       oklch(80% 0.012 250);
  --bs-fg-mute:       oklch(62% 0.014 250);
  --bs-fg-faint:      oklch(48% 0.014 250);

  --bs-accent:        oklch(78% 0.13 200);
  --bs-accent-soft:   oklch(78% 0.13 200 / 0.14);

  --bs-ok:            oklch(72% 0.16 150);
  --bs-warn:          oklch(80% 0.15 85);
  --bs-err:           oklch(68% 0.20 25);
  --bs-info:          oklch(72% 0.13 240);

  --bs-r-sm: 6px;
  --bs-r-md: 8px;
  --bs-r-lg: 12px;
}

[data-theme="light"] {
  --bs-bg-app:        oklch(98% 0.002 250);
  --bs-bg-panel:      oklch(100% 0.000 250);
  --bs-bg-panel-2:    oklch(96% 0.003 250);
  --bs-bg-row-hover:  oklch(94% 0.004 250);
  --bs-line:          oklch(88% 0.005 250);
  --bs-line-strong:   oklch(78% 0.008 250);

  --bs-fg:            oklch(12% 0.012 250);
  --bs-fg-soft:       oklch(25% 0.015 250);
  --bs-fg-mute:       oklch(45% 0.018 250);
  --bs-fg-faint:      oklch(65% 0.012 250);

  --bs-accent:        oklch(55% 0.15 200);
  --bs-accent-soft:   oklch(55% 0.15 200 / 0.08);
}

/* ---------------------------------------------------------------- */
/* Body chrome                                                      */
/* ---------------------------------------------------------------- */

body.font-inter {
  background: var(--bs-bg-app);
  color: var(--bs-fg);
}

/* ---------------------------------------------------------------- */
/* Tailwind class overrides used by the post-card / tag system.     */
/* These classes are baked into style.css; we re-color them here.   */
/* ---------------------------------------------------------------- */

.bg-purple-600,
.hover\:bg-purple-600:hover,
.group:hover .group-hover\:bg-purple-600 { background-color: var(--bs-brand-purple) !important; }
.text-purple-600,
.hover\:text-purple-600:hover,
.group:hover .group-hover\:text-purple-600 { color: var(--bs-brand-purple) !important; }
.border-purple-600 { border-color: var(--bs-brand-purple) !important; }

/* Post-tag pill palette: keep four distinct colors but draw them
 * from the bs-* accent set so they read on both themes. */
.bg-blue-500  { background-color: var(--bs-info) !important; color: var(--bs-fg) !important; }
.bg-pink-500  { background-color: var(--bs-err)  !important; color: var(--bs-fg) !important; }
.bg-green-500 { background-color: var(--bs-ok)   !important; color: var(--bs-fg) !important; }

[data-theme="light"] .text-gray-100,
[data-theme="light"] .text-gray-200,
[data-theme="light"] .text-gray-300 { color: var(--bs-fg) !important; }

[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500 { color: var(--bs-fg-soft) !important; }

[data-theme="light"] .text-gray-600,
[data-theme="light"] .text-gray-700,
[data-theme="light"] .text-gray-800,
[data-theme="light"] .text-gray-900 { color: var(--bs-fg) !important; }

/* Tailwind Typography (prose-invert) keeps its dark-mode palette
 * baked in even when the surrounding page swaps to light. Repaint
 * headings, body copy, tables, and strong text using --bs-fg so
 * posts stay readable on white. */
[data-theme="light"] .prose,
[data-theme="light"] .prose-invert,
[data-theme="light"] .prose p,
[data-theme="light"] .prose li,
[data-theme="light"] .prose td,
[data-theme="light"] .prose blockquote { color: var(--bs-fg-soft) !important; }

[data-theme="light"] .prose h1,
[data-theme="light"] .prose h2,
[data-theme="light"] .prose h3,
[data-theme="light"] .prose h4,
[data-theme="light"] .prose h5,
[data-theme="light"] .prose h6,
[data-theme="light"] .prose strong,
[data-theme="light"] .prose th { color: var(--bs-fg) !important; }

[data-theme="light"] .prose code { color: var(--bs-brand-purple) !important; }
[data-theme="light"] .prose pre,
[data-theme="light"] .prose pre code { color: var(--bs-fg) !important; }
[data-theme="light"] .prose hr { border-color: var(--bs-line) !important; }
[data-theme="light"] .prose table,
[data-theme="light"] .prose tbody tr,
[data-theme="light"] .prose tbody td,
[data-theme="light"] .prose thead th { border-color: var(--bs-line) !important; }
[data-theme="light"] .prose tbody td { color: var(--bs-fg-soft) !important; }

/* ---------------------------------------------------------------- */
/* Header / footer chrome classes (refs from refactored templates). */
/* ---------------------------------------------------------------- */

.bs-bh {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bs-bg-app);
  border-bottom: 1px solid var(--bs-line);
}
.bs-bh__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 16px 32px;
}
.bs-bh__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--bs-fg);
  text-decoration: none;
}
.bs-bh__logo-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 22px;
  line-height: 1;
}
.bs-bh__links {
  display: flex;
  gap: 22px;
}
.bs-bh__link {
  font-size: 14px;
  color: var(--bs-fg-soft);
  text-decoration: none;
}
.bs-bh__link:hover { color: var(--bs-fg); }
.bs-bh__cta-row {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bs-bh__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--bs-r-md);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.bs-bh__btn--ghost {
  color: var(--bs-fg-soft);
  border: 1px solid var(--bs-line-strong);
  background: transparent;
}
.bs-bh__btn--ghost:hover { color: var(--bs-fg); border-color: var(--bs-fg-mute); }
.bs-bh__btn--primary {
  color: #fff;
  background: var(--bs-brand-purple);
  border: 1px solid var(--bs-brand-purple);
}
.bs-bh__btn--primary:hover { background: var(--bs-brand-purple-strong); border-color: var(--bs-brand-purple-strong); }

/* Theme-toggle button shared with marketing chrome. */
.bs-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--bs-r-md);
  border: 1px solid var(--bs-line-strong);
  background: transparent;
  color: var(--bs-fg-soft);
  cursor: pointer;
}
.bs-theme-toggle:hover { color: var(--bs-fg); border-color: var(--bs-fg-mute); }
.bs-theme-toggle .bs-theme-toggle__sun { display: none; }
.bs-theme-toggle .bs-theme-toggle__moon { display: inline-block; }
[data-theme="light"] .bs-theme-toggle .bs-theme-toggle__sun { display: inline-block; }
[data-theme="light"] .bs-theme-toggle .bs-theme-toggle__moon { display: none; }