/* ============================================================================
 * Brutal theme for BaseX — neo-brutalist pastel-pop aesthetic
 *
 * Cream canvas, candy-bright brand colors, 2px ink-black borders everywhere,
 * hard offset shadows (no blur!), chunky Space Grotesk type. Elements
 * physically lift on hover and press down on click.
 *
 * USAGE (any BaseX-consuming app)
 * --------------------------------
 *   1. Drop this file into your public/ folder.
 *   2. Add `<link rel="stylesheet" href="path/to/brutal.css">` to index.html.
 *   3. Toggle `document.body.classList.toggle('theme-brutal')` to activate.
 *
 * Everything here is unlayered consumer CSS — the framework lives in
 * @layer bx.*, so these rules win without a single !important.
 *
 * Rules tagged "SHOWCASE-SPECIFIC" target the Nexxus showcase's own
 * components (bxs-sidebar); strip them when adapting to your app.
 * ============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
 *  Token overrides
 * ───────────────────────────────────────────────────────────────────────── */

body.theme-brutal {
  /* Brand — candy colors, ink text on all of them */
  --bx-brand-primary: #ff90e8;
  --bx-brand-primary-contrast: #111111;
  --bx-brand-secondary: #23a094;
  --bx-brand-secondary-contrast: #111111;
  --bx-brand-success: #3ecf8e;
  --bx-brand-success-contrast: #111111;
  --bx-brand-warning: #ffc900;
  --bx-brand-warning-contrast: #111111;
  --bx-brand-error: #ff4911;
  --bx-brand-error-contrast: #111111;
  --bx-brand-info: #90c2ff;
  --bx-brand-info-contrast: #111111;

  /* Surfaces — warm cream, nothing clinical */
  --bx-background-page: #fff3e4;
  --bx-background-content: #fffaf2;
  --bx-background-control: #ffffff;
  --bx-background-hover: rgba(17, 17, 17, 0.06);

  /* Borders — INK. Always ink. */
  --bx-border-color: #111111;
  --bx-border-radius: 10px;

  /* Typography */
  --bx-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --bx-font-color-dark: #111111;
  --bx-font-color-muted: #55504a;
  --bx-font-color-placeholder: #8a8378;

  /* Hard offset shadows, zero blur */
  --bx-box-shadow-color: #111111;
  --bx-box-shadow: 4px 4px 0 #111111;

  /* Buttons — chunky keys with fat borders */
  --bx-button-border-radius: 10px;
  --bx-button-font-weight: 700;
  --bx-button-background: #ffffff;
  --bx-button-color: #111111;
  --bx-button-border-size: 2px;
  --bx-button-border-color: #111111;
  --bx-button-box-shadow: 3px 3px 0 #111111;

  /* Form controls — white wells, ink borders */
  --bx-form-control-background: #ffffff;
  --bx-form-control-border-color: #111111;
  --bx-form-control-border-size: 2px;
  --bx-form-control-border-radius: 10px;
  --bx-form-control-box-shadow: 3px 3px 0 #111111;
  --bx-form-control-color: #ff90e8;

  /* Chrome — sunshine sidebar, white header */
  --bx-main-header-background: #ffffff;
  --bx-main-header-font-color: #111111;
  --bx-main-header-shadow: 0 2px 0 #111111;
  --bx-main-menu-background: #ffc900;
  --bx-main-menu-backdrop: #fffaf2;
  --bx-main-menu-font-color: #111111;
  --bx-main-menu-border-radius: 10px;

  /* Overlays */
  --bx-popup-background: #ffffff;
  --bx-popup-border: 2px solid #111111;
  --bx-popup-border-radius: 10px;
  --bx-popup-box-shadow: 5px 5px 0 #111111;
  --bx-dialog-background: #fffaf2;
  --bx-dialog-backdrop: rgba(17, 17, 17, 0.35);
  --bx-dialog-box-shadow: 8px 8px 0 #111111;
  --bx-dialog-header-background: #ff90e8;
  --bx-dialog-header-font-color: #111111;
  --bx-chip-background: #ffffff;
  --bx-chip-color: #111111;
  --bx-chip-box-shadow: 2px 2px 0 #111111;

  /* Scrollbars */
  --bx-scrollbar-track-color: rgba(17, 17, 17, 0.08);
  --bx-scrollbar-thumb-color: #111111;
}

/* ─────────────────────────────────────────────────────────────────────────
 *  CSS recipes
 * ───────────────────────────────────────────────────────────────────────── */

body.theme-brutal ::selection {
  background: #ffc900;
  color: #111111;
}

/* Headings are ink, always — pink prose headlines don't survive on cream */
body.theme-brutal :is(h1, h2, h3, h4) {
  color: #111111;
  font-weight: 700;
}

/* ── Buttons — lift on hover, slam down on press ── */

body.theme-brutal .bx-button:not(.bx-button-link) {
  border: 2px solid #111111;
  box-shadow: 3px 3px 0 #111111;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
body.theme-brutal .bx-button:not(.bx-button-link):not(.ng-disabled):hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111111;
  filter: none;
}
body.theme-brutal .bx-button:not(.bx-button-link):not(.ng-disabled):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #111111;
}
body.theme-brutal .bx-button.ng-disabled {
  filter: none;
  opacity: 1;
  background: #e9e2d6;
  color: #8a8378;
  border-color: #8a8378;
  box-shadow: 3px 3px 0 #8a8378;
}

/* Inverted variants keep their transparent look but get ink text */
body.theme-brutal .bx-button.bx-button-default-inverted:not(.ng-disabled):not(:hover) {
  border: none;
  box-shadow: none;
}

body.theme-brutal .bx-button.bx-button-link:not(.ng-disabled) {
  color: #111111;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #ff90e8;
  text-underline-offset: 3px;
}
body.theme-brutal .bx-button.bx-button-link:not(.ng-disabled):hover {
  color: #111111;
  text-decoration-color: #ffc900;
}

body.theme-brutal :focus-visible {
  outline: 3px solid #ff90e8;
  outline-offset: 2px;
}

/* ── Inputs — thick wells that pop on focus ── */

body.theme-brutal bx-input {
  font-size: 15px;
  font-weight: 500;
}
body.theme-brutal bx-input .input-element-box:focus-within {
  box-shadow: 5px 5px 0 #111111;
}

/* ── Cards — paper cutouts pinned to the board ── */

body.theme-brutal .bx-card-element,
body.theme-brutal bx-card {
  background: #ffffff;
  border: 2px solid #111111;
  border-radius: 12px;
  box-shadow: 5px 5px 0 #111111;
}

/* ── Page tabs — the active tab is a raised sticker ── */

body.theme-brutal bx-content-tabs[static] {
  background: #ffffff;
  border: 2px solid #111111;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #111111;
}
body.theme-brutal bx-content-tabs[static] .bx-tabs-slider {
  background: #ffc900;
  border: 2px solid #111111;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #111111;
}

/* ── Main menu — sunshine panel, sticker items ── */

body.theme-brutal bx-main-menu .main-menu-content,
body.theme-brutal bxs-sidebar /* SHOWCASE-SPECIFIC */ {
  background: #ffc900;
  border-right: 2px solid #111111;
}
body.theme-brutal :is(bx-main-menu, bxs-sidebar) .menu-item-background {
  background: transparent;
}
body.theme-brutal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link {
  color: #111111;
  font-weight: 600;
}
body.theme-brutal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active,
body.theme-brutal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.menu-search-result {
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #111111;
}
body.theme-brutal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active > bx-icon {
  color: #111111;
}
body.theme-brutal bx-main-menu .menu-item.menu-link.active:before {
  background: #ff90e8;
}
body.theme-brutal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:hover:not(.active),
body.theme-brutal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:focus-within:not(.active) {
  background: rgba(255, 255, 255, 0.45);
}

/* SHOWCASE-SPECIFIC: the showcase sidebar's header/search sit on the yellow */
body.theme-brutal bxs-sidebar .sidebar-header,
body.theme-brutal bxs-sidebar input {
  color: #111111;
}

/* ── Status badges — candy stickers ── */

body.theme-brutal bx-status-badge {
  border: 2px solid #111111;
  border-radius: 999px;
  box-shadow: 2px 2px 0 #111111;
  font-weight: 700;
  color: #111111;
}
body.theme-brutal bx-status-badge > .badge-icon {
  background-color: transparent;
  color: inherit;
}
body.theme-brutal bx-status-badge.status-primary   { background: #ff90e8; }
body.theme-brutal bx-status-badge.status-secondary { background: #7de8dd; }
body.theme-brutal bx-status-badge.status-success   { background: #3ecf8e; }
body.theme-brutal bx-status-badge.status-warning   { background: #ffc900; }
body.theme-brutal bx-status-badge.status-danger    { background: #ff9169; }
body.theme-brutal bx-status-badge.status-info      { background: #90c2ff; }
body.theme-brutal bx-status-badge.status-light     { background: #ffffff; }
body.theme-brutal bx-status-badge.status-dark      { background: #111111; color: #ffffff; }

/* ── Badges (utility) ── */

body.theme-brutal .bx-badge {
  border: 2px solid #111111;
  font-weight: 700;
}

/* ── Toasts — sticky notes ── */

body.theme-brutal .bx-toastr {
  border: 2px solid #111111;
  border-radius: 12px;
  box-shadow: 5px 5px 0 #111111;
  color: #111111;
  font-weight: 600;
}