/* =========================================================
   vstepX CSS (no :root brand overrides)
   Approach: Brand utility classes (explicit, opt-in)
   - Keep :root for neutral tokens only
   - Use .brand-* utilities for brand color
   - Optional: use .btn-brand / .link-brand / .border-brand, etc.
   ========================================================= */

/* ---------- Neutral tokens (safe to keep in :root) ---------- */
:root{
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f9fafb;
  --radius: 14px;
}

body{
  color: var(--text);
}

/* =========================================================
   BRAND UTILITIES (opt-in, explicit)
   ========================================================= */
:root{
  /* You can change brand here without touching Bootstrap variables */
  --brand-color: #8c52ff;
  --brand-rgb: 140, 82, 255;

  /* Hover tone for brand (optional) */
  --brand-hover: #7b48e0;
}

/* Basic color utilities */
.brand-bg{ background-color: var(--brand-color) !important; }
.brand-text{ color: var(--brand-color) !important; }
.brand-border{ border-color: var(--brand-color) !important; }

/* Subtle brand helpers */
.brand-bg-soft{ background-color: rgba(var(--brand-rgb), .10) !important; }
.brand-border-soft{ border-color: rgba(var(--brand-rgb), .35) !important; }
.brand-shadow-soft{ box-shadow: 0 .5rem 1rem rgba(17,24,39,.06) !important; }

/* Brand focus ring (use on inputs/buttons if needed) */
.brand-focus:focus{
  border-color: rgba(var(--brand-rgb), .45) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .18) !important;
}

/* Brand link */
.link-brand{
  color: var(--brand-color);
  text-decoration: none;
}
.link-brand:hover{
  color: var(--brand-hover);
  text-decoration: underline;
}

/* Brand dot (for old brand-dot element) */
.brand-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
  background: var(--brand-color);
}

/* =========================================================
   BUTTONS
   - Do not override Bootstrap .btn-primary globally
   - Provide an explicit .btn-brand class to use when needed
   ========================================================= */
.btn-brand{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-color);
  --bs-btn-border-color: var(--brand-color);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);

  --bs-btn-focus-shadow-rgb: var(--brand-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(var(--brand-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--brand-rgb), .55);
}

/* Outline brand button */
.btn-outline-brand{
  --bs-btn-color: var(--brand-color);
  --bs-btn-border-color: rgba(var(--brand-rgb), .55);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-color);
  --bs-btn-hover-border-color: var(--brand-color);

  --bs-btn-focus-shadow-rgb: var(--brand-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);

  --bs-btn-disabled-color: rgba(var(--brand-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--brand-rgb), .25);
}

/* =========================================================
   CARDS / LIST ITEMS (from your existing CSS)
   ========================================================= */
.card{
  border-radius: var(--radius);
}

/* Card hover effect */
.post-card{
  border: 1px solid var(--border);
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(17,24,39,.08);
}

/* Small thumbs */
.thumb{
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}
.post-thumb{
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
}

/* List item hover */
.post-list-item{
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-list-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.5rem rgba(17,24,39,.08);
}

/* =========================================================
   ARTICLE TYPOGRAPHY
   ========================================================= */
.article-content{
  line-height: 1.75;
  font-size: .98rem;
}
.article-content h2{
  margin-top: 1.75rem;
  margin-bottom: .65rem;
  font-weight: 600;
}
.article-content ul{
  padding-left: 1.2rem;
}
.article-content .lead{
  color: #374151;
}

/* =========================================================
   CALLOUT
   ========================================================= */
.callout{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
}

/* Optional: brand callout variant (explicit) */
.callout-brand{
  border-color: rgba(var(--brand-rgb), .35);
  background: rgba(var(--brand-rgb), .06);
}

/* =========================================================
   CODE BOX
   ========================================================= */
.codebox{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: #0b1220;
  color: #e5e7eb;
  overflow: auto;
}
.codebox code{
  color: inherit;
}

/* =========================================================
   TOC sticky
   ========================================================= */
.toc-sticky{
  position: sticky;
  top: 92px; /* below navbar */
}
.toc-nav{
  display: grid;
  gap: 6px;
}
.toc-link{
  text-decoration: none;
  color: var(--text);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-size: .92rem;
}
.toc-link:hover{
  /* Use brand utilities without relying on :root brand tokens */
  border-color: rgba(var(--brand-rgb), .35);
  box-shadow: 0 .5rem 1rem rgba(17,24,39,.06);
}

/* =========================================================
   NAVBAR small helpers (optional)
   - No global Bootstrap overrides
   ========================================================= */
.navbar .nav-link.active{
  font-weight: 700;
}

/* If you want active link in brand color, opt-in with .nav-brand */
.nav-brand .nav-link.active{
  color: var(--brand-color) !important;
}

.btn-icon{
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.btn-icon i{
  font-size: 1.05rem;
  line-height: 1;
}