/* ============================================================================
   weirsoe-theme — Bulma adapter.
   Maps Bulma's component classes onto the weirsoe-theme tokens so an existing
   Bulma site gets the dark card look without rewriting markup. Load AFTER
   bulma(swatch) and AFTER weirsoe-theme.css (which defines --color-* tokens).
   ========================================================================== */

/* Typography */
.title, h1, h2, h3, h4, strong, .label, label.label { color: var(--color-text) !important; }
.subtitle { color: var(--color-muted) !important; }
.content, p, .navbar-item, td, th, li { color: var(--color-text); }
.has-text-grey, .has-text-grey-light, .is-size-7.has-text-grey { color: var(--color-muted) !important; }
h1.title, .title.is-1, .title.is-2, .title.is-3 { letter-spacing: -0.02em; font-weight: 750; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-2); }

/* Navbar — translucent dark, blurred */
.navbar, .navbar.is-fixed-top {
  background-color: color-mix(in srgb, var(--color-bg) 90%, transparent) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none !important;
}
.navbar-item, .navbar-link { color: var(--color-text) !important; }
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
  background-color: color-mix(in srgb, var(--color-text) 6%, transparent) !important;
  color: var(--color-accent) !important;
}
.navbar-brand .navbar-item span { font-weight: 700; letter-spacing: -0.01em; }
.navbar-dropdown {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--wt-radius-sm);
  box-shadow: var(--wt-shadow);
}
.navbar-divider { background-color: var(--color-border); }

/* Cards */
.box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--wt-radius);
  box-shadow: var(--wt-shadow);
  color: var(--color-text);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.box:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  box-shadow: var(--wt-shadow-hover);
  transform: translateY(-2px);
}
.box .box { box-shadow: none; transform: none; }
.notification { border-radius: var(--wt-radius); border: 1px solid var(--color-border); }
hr { background-color: var(--color-border); }

/* Buttons */
.button { border-radius: var(--wt-radius-sm); transition: filter 0.15s ease, transform 0.05s ease, background-color 0.15s ease; }
.button:active { transform: translateY(1px); }
.button.is-primary, .button.is-link { background-color: var(--color-accent); border-color: transparent; color: var(--color-accent-ink); font-weight: 650; }
.button.is-primary:hover, .button.is-link:hover { filter: brightness(1.08); color: var(--color-accent-ink); }
.button.is-light, .button:not(.is-primary):not(.is-link):not(.is-danger):not(.is-warning):not(.is-success) {
  background-color: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text);
}
.button.is-light:hover { background-color: var(--color-surface-3); color: var(--color-text); }
.button.is-danger.is-light { background-color: #3a1620; color: var(--color-bad); border-color: #5b2230; }
.button.is-warning { background-color: #3a2c10; color: #ffd479; border-color: #5b471d; }
.button.is-success { background-color: #10341f; color: var(--color-good); border-color: #1d5a32; }

/* Form controls */
.input, .textarea, .select select {
  background-color: var(--color-surface-2); border-color: var(--color-border);
  color: var(--color-text); border-radius: var(--wt-radius-sm);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--color-muted) 80%, transparent); }
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--color-accent); }
.label { font-weight: 600; }

/* Tags */
.tag:not(.is-primary):not(.is-link):not(.is-success):not(.is-danger):not(.is-warning) {
  background-color: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px;
}
.tag.is-link { background-color: #1b2a44; color: #9ec3ff; }
.tag.is-success { background-color: #10341f; color: var(--color-good); }
.tag.is-danger { background-color: #3a1620; color: var(--color-bad); }

/* Notifications */
.notification.is-info.is-light { background-color: #10243a; color: #cfe6ff; border-color: #1d3a5a; }
.notification.is-success.is-light { background-color: #10341f; color: #c8f7d6; border-color: #1d5a32; }
.notification.is-danger.is-light { background-color: #3a1620; color: #ffd0d9; border-color: #5b2230; }
.notification.is-warning.is-light { background-color: #3a2c10; color: #ffe1a8; border-color: #5b471d; }

/* Media object (list items) */
.media + .media { border-top: 1px solid var(--color-border); }
.media-left img { border-radius: var(--wt-radius-sm); border: 1px solid var(--color-border); background: #fff; }

/* Misc */
details summary { color: var(--color-accent); }
.section { padding-top: 2rem; }

/* Responsive content width: full-bleed on phones, a centred readable column on
   large screens (so a wishlist doesn't stretch edge-to-edge on a desktop). The
   app marks a wrapper with .container.fullwidth; constrain it past tablet. */
@media (min-width: 769px) {
  .container.fullwidth { max-width: 52rem; margin-left: auto; margin-right: auto; }
  .container.fullwidth.is-wide { max-width: 72rem; }
}