/* Brand Theme Layer: color system only, no layout changes */

:root {
  color-scheme: dark;
  accent-color: var(--bb-blue);

  --bb-cream: #F2EDD0;
  --bb-black: #0D0D0D;
  --bb-blue: #2975D9;
  --bb-red: #F22E2E;

  /* derived neutrals from black only */
  --bb-ink: var(--bb-black);
  --bb-muted: rgba(13, 13, 13, 0.72);
  --bb-border: rgba(13, 13, 13, 0.35);
  --bb-border-soft: rgba(13, 13, 13, 0.18);

  /* surfaces */
  --bb-canvas: var(--bb-black);
  --bb-surface: rgba(242, 237, 208, 0.08);
  --bb-surface-2: rgba(242, 237, 208, 0.12);

  /* text on dark */
  --bb-text: var(--bb-cream);
  --bb-text-muted: rgba(242, 237, 208, 0.75);

  /* accents */
  --bb-link: var(--bb-blue);
  --bb-link-hover: rgba(41, 117, 217, 0.85);
  --bb-danger: var(--bb-red);

  --bb-focus: var(--bb-blue);

  /* map legacy theme tokens to brand tokens */
  --c-canvas: var(--bb-canvas);
  --c-surface: var(--bb-surface);
  --c-surface-2: var(--bb-surface-2);
  --c-text: var(--bb-text);
  --c-text-rgb: 242 237 208;
  --c-muted: var(--bb-text-muted);
  --c-border: var(--bb-border-soft);
  --c-border-strong: var(--bb-border);
  --c-primary: var(--bb-blue);
  --c-primary-rgb: 41 117 217;
  --c-primary-hover: var(--bb-link-hover);
  --c-primary-hover-rgb: 41 117 217;
  --c-danger: var(--bb-red);
  --c-danger-rgb: 242 46 46;
  --c-focus: var(--bb-focus);
  --tw-ring-offset-color: var(--bb-canvas);
}

html,
body,
body .site-main,
body main.site-main {
  background-color: var(--bb-canvas);
  color: var(--bb-text);
}

*,
::before,
::after {
  border-color: var(--bb-border-soft);
}

::selection {
  background-color: var(--bb-blue);
  color: var(--bb-cream);
}

::-moz-selection {
  background-color: var(--bb-blue);
  color: var(--bb-cream);
}

a {
  color: var(--bb-link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--bb-link-hover);
  text-decoration: none;
}

:focus-visible {
  outline-color: var(--bb-focus);
}

/* Utility color remaps */
.bg-canvas {
  background-color: var(--bb-canvas);
}

.bg-white {
  background-color: var(--bb-surface);
}

.bg-slate-100 {
  background-color: var(--bb-surface-2);
}

.bg-surface-2 {
  background-color: var(--bb-surface-2);
}

.bg-primary {
  background-color: var(--bb-blue);
}

.bg-primary\/10 {
  background-color: rgba(41, 117, 217, 0.18);
}

.bg-primary\/15 {
  background-color: rgba(41, 117, 217, 0.24);
}

.bg-danger {
  background-color: var(--bb-red);
}

.text-primary {
  color: var(--bb-blue);
}

.text-primary-hover {
  color: var(--bb-link-hover);
}

.text-white {
  color: var(--bb-cream);
}

.text-slate-900,
.text-slate-800 {
  color: var(--bb-text);
}

.text-slate-700,
.text-slate-600,
.text-slate-500,
.text-slate-400,
.text-slate-300 {
  color: var(--bb-text-muted);
}

.border,
.border-t,
.border-b,
.border-l,
.border-r,
.border-border {
  border-color: var(--bb-border-soft);
}

.border-primary {
  border-color: var(--bb-blue);
}

.hover\:bg-primary\/10:hover {
  background-color: rgba(41, 117, 217, 0.24);
}

.hover\:bg-primary-hover:hover {
  background-color: var(--bb-link-hover);
}

.hover\:text-primary:hover {
  color: var(--bb-blue);
}

.hover\:text-primary-hover:hover {
  color: var(--bb-link-hover);
}

.placeholder\:text-slate-500::placeholder {
  color: var(--bb-text-muted);
}

.placeholder\:text-slate-400::placeholder {
  color: var(--bb-text-muted);
}

.hover\:text-slate-900:hover {
  color: var(--bb-text);
}

.focus\:border-primary:focus {
  border-color: var(--bb-blue);
}

.focus\:ring-primary\/40:focus {
  --tw-ring-color: rgba(41, 117, 217, 0.4);
}

.focus\:ring-primary\/30:focus {
  --tw-ring-color: rgba(41, 117, 217, 0.3);
}

/* Sidebar split-flap descriptor */
.sidebar-panel .bb-flap {
  --bb-width: 12;
  --bb-gap: 0.14ch;
  --bb-flip-w: 1.22ch;
  --bb-flip-h: 1.2em;
  display: inline-grid;
  position: relative;
  grid-template-columns: repeat(var(--bb-width), var(--bb-flip-w));
  column-gap: var(--bb-gap);
  width: calc(var(--bb-width) * var(--bb-flip-w) + (var(--bb-width) - 1) * var(--bb-gap));
  height: var(--bb-flip-h);
  margin-left: 0;
  margin-top: 0.2rem;
  vertical-align: baseline;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.86em;
  line-height: 1;
  text-transform: lowercase;
  color: var(--bb-cream, #F2EDD0);
  filter: drop-shadow(0 0 6px rgba(41, 117, 217, 0.16)) drop-shadow(0 0 4px rgba(242, 46, 46, 0.12));
  transform: translateY(0);
}

.sidebar-panel .bb-flap::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border-radius: 0.1em;
  background: linear-gradient(90deg, rgba(41, 117, 217, 0.18), rgba(13, 13, 13, 0) 40%, rgba(13, 13, 13, 0) 60%, rgba(242, 46, 46, 0.18));
  pointer-events: none;
  mix-blend-mode: screen;
}

.sidebar-panel .site-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sidebar-panel .site-title__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.sidebar-panel .site-title__link:hover,
.sidebar-panel .site-title__link:focus-visible {
  text-decoration: none;
}

.sidebar-panel .site-title__name {
  line-height: 1;
  color: var(--bb-cream);
  background-image: linear-gradient(90deg, rgba(41, 117, 217, 0.75), rgba(242, 237, 208, 0.95) 50%, rgba(242, 46, 46, 0.75));
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: -1px 0 rgba(41, 117, 217, 0.35), 1px 0 rgba(242, 46, 46, 0.35), 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: bb-title-sheen 10s ease-in-out infinite;
}

@keyframes bb-title-sheen {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-panel .site-title__name {
    animation: none;
  }
}

.sidebar-panel .bb-flip {
  position: relative;
  width: var(--bb-flip-w);
  height: var(--bb-flip-h);
  perspective: 10em;
  transform-style: preserve-3d;
}

.sidebar-panel .bb-flip::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(41, 117, 217, 0.45), rgba(242, 237, 208, 0.18), rgba(242, 46, 46, 0.45));
  opacity: 0.45;
  pointer-events: none;
  transform: translateY(-0.5px);
}

.sidebar-panel .bb-flip-holder {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.sidebar-panel .bb-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0D0D0D;
  border: 1px solid rgba(242, 237, 208, 0.18);
  border-radius: 0.08em;
  box-shadow: inset 0 1px 0 rgba(242, 237, 208, 0.22),
    inset 0 -1px 0 rgba(13, 13, 13, 0.85);
  backface-visibility: hidden;
  color: inherit;
  text-shadow: 0 0 8px rgba(41, 117, 217, 0.25);
}

.sidebar-panel .bb-flip-char {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1;
  color: var(--bb-cream, #F2EDD0);
  background-image: linear-gradient(90deg, rgba(41, 117, 217, 0.9), rgba(242, 237, 208, 0.98) 50%, rgba(242, 46, 46, 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: -0.6px 0 rgba(41, 117, 217, 0.32), 0.6px 0 rgba(242, 46, 46, 0.32), 0 1px 6px rgba(13, 13, 13, 0.45);
}

.sidebar-panel .bb-flip-face--top,
.sidebar-panel .bb-flip-face--flip-top {
  clip-path: inset(0 0 50% 0);
}

.sidebar-panel .bb-flip-face--bottom,
.sidebar-panel .bb-flip-face--flip-bottom {
  clip-path: inset(50% 0 0 0);
}

.sidebar-panel .bb-flip-face--top {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(41, 117, 217, 0.14), rgba(13, 13, 13, 0) 35%, rgba(13, 13, 13, 0) 65%, rgba(242, 46, 46, 0.14)),
    linear-gradient(to bottom, rgba(242, 237, 208, 0.24), rgba(13, 13, 13, 0.06));
}

.sidebar-panel .bb-flip-face--bottom {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(41, 117, 217, 0.12), rgba(13, 13, 13, 0) 35%, rgba(13, 13, 13, 0) 65%, rgba(242, 46, 46, 0.12)),
    linear-gradient(to bottom, rgba(13, 13, 13, 0.08), rgba(13, 13, 13, 0.65));
}

.sidebar-panel .bb-flip-face--flip-top {
  z-index: 3;
  transform-origin: bottom;
  transform: rotateX(0deg);
  transition: transform 0.28s ease;
}

.sidebar-panel .bb-flip-face--flip-bottom {
  z-index: 4;
  transform-origin: top;
  transform: rotateX(90deg);
  transition: transform 0.28s ease 0.08s;
}

.sidebar-panel .bb-flip.is-flipping .bb-flip-face--flip-top {
  transform: rotateX(-90deg);
}

.sidebar-panel .bb-flip.is-flipping .bb-flip-face--flip-bottom {
  transform: rotateX(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-panel .bb-flip-face--flip-top,
  .sidebar-panel .bb-flip-face--flip-bottom {
    transition: none;
  }
}

/* Component mappings */
.sidebar-panel,
.sidebar-avatar,
.post-card,
.widget,
[data-slider-track] > article,
details.lg\:hidden,
.site-main article.border,
.site-main article.border-border {
  background-color: var(--bb-surface);
  border-color: var(--bb-border-soft);
  color: var(--bb-text);
}

.entry-content,
.prose {
  color: var(--bb-text-muted);
}

.prose {
  --tw-prose-body: var(--bb-text-muted);
  --tw-prose-headings: var(--bb-text);
  --tw-prose-lead: var(--bb-text-muted);
  --tw-prose-links: var(--bb-link);
  --tw-prose-bold: var(--bb-text);
  --tw-prose-counters: var(--bb-text-muted);
  --tw-prose-bullets: var(--bb-text-muted);
  --tw-prose-hr: var(--bb-border);
  --tw-prose-quotes: var(--bb-text);
  --tw-prose-quote-borders: var(--bb-border);
  --tw-prose-captions: var(--bb-text-muted);
  --tw-prose-kbd: var(--bb-text);
  --tw-prose-kbd-shadows: rgba(13, 13, 13, 0.6);
  --tw-prose-code: var(--bb-text);
  --tw-prose-pre-code: var(--bb-text);
  --tw-prose-pre-bg: rgba(13, 13, 13, 0.8);
  --tw-prose-th-borders: var(--bb-border);
  --tw-prose-td-borders: var(--bb-border-soft);
}

/* Post/page content readability */
.entry-content.prose {
  line-height: 1.9;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

.entry-content.prose :is(p, li) {
  line-height: 1.9;
  letter-spacing: 0.005em;
}

.entry-content.prose :is(h1, h2, h3, h4) {
  line-height: 1.25;
}

.prose :is(h1, h2, h3, h4, h5, h6),
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--bb-text);
}

.prose a,
.entry-content a {
  color: var(--bb-link);
}

.prose a:hover,
.entry-content a:hover {
  color: var(--bb-link-hover);
  text-decoration: none;
}

.prose blockquote {
  background-color: var(--bb-surface-2);
  border-color: var(--bb-border);
  color: var(--bb-text);
}

/* Comments layout clarity (color + typography only) */
#comments {
  color: var(--bb-text);
}

#comments h2 {
  color: var(--bb-text);
}

#comments .comment {
  background-color: var(--bb-surface);
  border-color: var(--bb-border);
}

#comments .comment time {
  color: var(--bb-text-muted);
}

#comments .comment img {
  border: 1px solid var(--bb-border-soft);
  background-color: transparent;
}

#comments .comment-reply-link,
#comments .comment a.comment-reply-link,
#comments .comment a.comment-edit-link {
  background-color: transparent;
  border-color: var(--bb-border);
  color: var(--bb-cream);
}

#comments .comment-reply-link:hover,
#comments .comment a.comment-reply-link:hover,
#comments .comment a.comment-edit-link:hover {
  border-color: var(--bb-blue);
  color: var(--bb-blue);
}

#comments .comment-respond,
#comments form {
  color: var(--bb-text);
}

#comments label {
  color: var(--bb-text-muted);
}

#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
  background-color: rgba(13, 13, 13, 0.55);
  color: var(--bb-cream);
  border-color: var(--bb-border-soft);
}

#comments input[type="text"]::placeholder,
#comments input[type="email"]::placeholder,
#comments input[type="url"]::placeholder,
#comments textarea::placeholder {
  color: var(--bb-text-muted);
}

.sidebar-panel nav a {
  color: var(--bb-cream);
  border-color: var(--bb-border-soft);
}

.sidebar-panel nav a:hover,
.sidebar-panel nav a:focus-visible {
  color: var(--bb-blue);
  text-decoration: none;
}

.sidebar-panel nav a[aria-current="page"] {
  border-left-color: var(--bb-blue);
  border-color: var(--bb-blue);
  color: var(--bb-cream);
}

/* Sidebar logo background should blend with panel */
.sidebar-avatar {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.sidebar-avatar img {
  border-radius: 0 !important;
  object-fit: contain !important;
}

/* Sidebar socials tooltip stacking */
.sidebar-socials__link {
  position: relative;
  z-index: 1;
}

.sidebar-socials__tooltip {
  position: absolute !important;
  z-index: 99999 !important;
  bottom: calc(100% + 0.5rem) !important;
  top: auto !important;
  transform: translate(-50%, 6px) !important;
  background-color: var(--bb-red) !important;
  color: var(--bb-cream) !important;
  border-color: var(--bb-red) !important;
  box-shadow: 0 10px 18px rgba(13, 13, 13, 0.6) !important;
}

.sidebar-socials__icon {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}

.sidebar-socials__link:hover {
  background-color: rgba(242, 46, 46, 0.12);
  border-color: rgba(242, 46, 46, 0.35);
}

.sidebar-panel,
.sidebar-panel__content,
.sidebar-socials__list,
.sidebar-socials__item {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.sidebar-panel__content > .flex {
  position: relative;
  z-index: 0;
}

.sidebar-panel__content > .flex p {
  position: relative;
  z-index: 0;
}

.sidebar-socials__list {
  position: relative;
  z-index: 50;
}

.sidebar-panel,
.sidebar-panel__content {
  overflow: visible;
}

.sidebar-socials__item,
.sidebar-socials__link {
  z-index: 30;
}

.sidebar-panel__content {
  position: relative;
  z-index: 0;
}

.sidebar-socials__link:hover .sidebar-socials__icon {
  color: var(--bb-red);
}

.sidebar-socials__link:hover .sidebar-socials__tooltip,
.sidebar-socials__link:focus-visible .sidebar-socials__tooltip {
  transform: translate(-50%, 0) !important;
}

/* Buttons */
button,
.button,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  background-color: transparent;
  color: var(--bb-cream);
  border-color: var(--bb-border);
}

button:hover,
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  border-color: var(--bb-blue);
  color: var(--bb-blue);
}

/* Form fields */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background-color: rgba(13, 13, 13, 0.55);
  color: var(--bb-cream);
  border-color: var(--bb-border-soft);
}

input::placeholder,
textarea::placeholder {
  color: var(--bb-text-muted);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: 2px;
}

/* Featured badge */
.bg-danger,
.featured-badge,
[data-featured],
.badge-featured {
  background-color: var(--bb-red);
  color: var(--bb-cream);
}

/* Post labels */
.post-card__body .text-primary,
[data-slider-track] .text-primary {
  color: var(--bb-red);
}

.post-card__body .text-primary a,
[data-slider-track] .text-primary a {
  color: var(--bb-red);
  text-decoration: none;
}

.post-card__body .text-primary a:hover,
[data-slider-track] .text-primary a:hover {
  color: var(--bb-red);
  text-decoration: none;
}

.site-main article a.bg-primary\/10 {
  background-color: rgba(242, 46, 46, 0.18);
  box-shadow: inset 0 0 0 1px var(--bb-red);
  color: var(--bb-cream);
}

.site-main article a.bg-primary\/10:hover {
  background-color: rgba(242, 46, 46, 0.28);
  color: var(--bb-cream);
}

/* Featured slider title */
[data-slider-track] h3,
[data-slider-track] h3 a {
  color: var(--bb-cream);
}

/* No underline treatment on headings */
.site-main :is(h1, h2, h3),
.widget-title {
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
}

/* Featured accent line */
.post-card--accent {
  box-shadow: inset 0 2px 0 var(--bb-red);
}