/* voAIce brand guide (pages/brand.html) — page-local specimens on top of the .vk page kit */
.bg-toc { margin-top: 24px; }
.bg-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; background: #e8e8ed; color: var(--voaice-gray-900); font-size: 13px; font-weight: 600; text-decoration: none; }
.bg-toc a:hover { background: #dcdce1; }
.bg-mark-pair, .bg-swatch-pair { display: flex; gap: 12px; margin-bottom: 12px; }
.bg-mark-pair img { width: 32px; height: 32px; }
.bg-swatch-pair { margin-bottom: 16px; }
.bg-swatch-pair > * { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 96px; border-radius: 10px; background: #fbfbfd; border: 1px solid #e8e8ed; }
.bg-swatch-pair > img { padding: 20px; object-fit: contain; height: 96px; }
.bg-tiles > img { padding: 24px 8px; }
.bg-wm { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.8px; color: #1d1d1f; }
.bg-wm span { color: inherit; }
.bg-wm .crm { color: #0066cc; }
.bg-wm-rev { background: #1d1d1f !important; border-color: #1d1d1f !important; color: #fff; }
.bg-wm-rev .crm { color: #4da3ff; }
.bg-olivia-dark { background: #1d1d1f !important; border-color: #1d1d1f !important; }
.bg-olivia-dark img { width: 56px; height: 56px; }
.bg-table-wrap { overflow-x: auto; border: 1px solid #e8e8ed; border-radius: 12px; background: #fff; }
.bg-table { width: 100%; border-collapse: collapse; font-size: 14px; letter-spacing: -0.3px; }
.bg-table th, .bg-table td { padding: 12px 16px; text-align: left; vertical-align: top; color: var(--voaice-gray-600); }
.bg-table th { font-size: 12px; font-weight: 600; color: var(--voaice-gray-600); border-bottom: 1px solid #e8e8ed; }
.bg-table td strong { color: var(--voaice-gray-900); font-weight: 600; }
.bg-table tr + tr td { border-top: 1px solid rgba(0,0,0,.06); }
.bg-colors { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bg-color { min-width: 0; padding: 12px; border: 1px solid #e8e8ed; border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.4; color: var(--voaice-gray-600); }
.bg-color .chip { display: block; height: 64px; margin-bottom: 10px; border-radius: 8px; }
.bg-color .bg-chip-line { box-shadow: inset 0 0 0 1px #d2d2d7; }
.bg-color strong { display: block; font-size: 14px; font-weight: 600; color: var(--voaice-gray-900); }
.bg-color code { display: block; margin: 2px 0 4px; font-family: var(--font-mono); font-size: 12px; color: var(--voaice-gray-900); overflow-wrap: anywhere; }
.bg-color span:not(.chip) { display: block; }
.bg-sub { margin: 32px 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.4px; color: var(--voaice-gray-900); }
.bg-type-display { font-family: var(--font-display); font-size: 32px !important; font-weight: 700; letter-spacing: -1px; line-height: 1.15 !important; color: var(--voaice-gray-900) !important; }
.bg-type-mono { font-family: var(--font-mono); font-size: 20px !important; color: var(--voaice-gray-900) !important; }
.vk-card code, .vk-items code { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.vk-sec-dark h2 { color: #fff; }
.bg-eyebrow-dark { color: #9fcaff; }
.bg-lead-dark { color: #c9c9ce; }
.bg-specs { margin-top: 24px; }
@media (max-width: 1023.98px) { .bg-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .bg-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bg-wm { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .bg-toc a { transition: none; } }
.bg-pack { margin: 0 0 24px; }
.bg-asset img { display: block; width: 100%; height: 72px; object-fit: contain; padding: 12px; margin-bottom: 12px; border-radius: 8px; background: #fbfbfd; border: 1px solid #e8e8ed; }
.bg-asset-dark img { background: #1d1d1f; border-color: #1d1d1f; }
.bg-owner { margin-top: 24px; }
.vk-lead a { color: var(--voaice-blue-dark); }
.bg-cardart img { display: block; width: 100%; height: auto; margin-bottom: 12px; border-radius: 6px; box-shadow: 0 0 0 1px #e8e8ed; }

/* 44px touch floor on this page (contents chips, inline links, footer links) */
.vk-chips.bg-toc li, .vk-chips.bg-toc li a { min-height: 44px; padding: 0 14px; font-size: 13px; }
.vk-chips.bg-toc li:has(a) { padding: 0; background: none; }
.vk-chips.bg-toc { gap: 8px; }
main .vk-links a, main .vk-link { min-height: 44px; }

/* Dark mode — light and dark are co-equal. Specimen tiles keep their literal colours on purpose. */
@media (prefers-color-scheme: dark) {
  /* Page tokens, chrome, cards, chips, buttons and footer come from the site-wide dark theme in style.css. */
  .bg-color, .bg-table-wrap { background: #1c1c1e; border-color: #38383a; }
  .vk-sec-tint .bg-color { background: #2c2c2e; border-color: #3a3a3c; }
  .vk-chips.bg-toc li a { background: #2c2c2e; color: #f5f5f7; }
  .vk-chips.bg-toc li a:hover { background: #3a3a3c; }
  .bg-table th, .bg-table td { color: #a1a1a6; }
  .bg-table th { border-bottom-color: #38383a; }
  .bg-table tr + tr td { border-top-color: rgba(255, 255, 255, 0.08); }
  .bg-swatch-pair > *, .bg-asset img { border-color: #3a3a3c; }
  .bg-wm-rev, .bg-olivia-dark, .bg-asset-dark img { border-color: #48484a !important; }
  .bg-cardart img { box-shadow: 0 0 0 1px #3a3a3c; }
  .bg-color .bg-chip-line { box-shadow: inset 0 0 0 1px #48484a; }
  .vk-card code, .vk-items code, .bg-color code { color: #f5f5f7; }
}