/*
  32bitmicro Bootstrap Theme
  Target: Bootstrap 5.3+
  Usage: load Bootstrap first, then this file.

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="/assets/css/32bitmicro-bootstrap-theme.css" rel="stylesheet">
*/

:root,
[data-bs-theme="light"] {
  --bm-white: #f7f8fa;
  --bm-paper: #f4efe5;
  --bm-ink: #1d232a;
  --bm-muted: #667380;
  --bm-panel: #ffffff;
  --bm-panel-2: #f2f5f7;
  --bm-border: #d8dee5;
  --bm-line: #b9c5d1;
  --bm-blue: #a9c3df;
  --bm-blue-strong: #6f9fcf;
  --bm-cyan: #7cc7d8;
  --bm-green: #64c49a;
  --bm-amber: #d8a94a;
  --bm-red: #c75d5d;
  --bm-graphite: #242629;
  --bm-graphite-2: #17191c;

  --bs-body-bg: #f7f8fa;
  --bs-body-color: #1d232a;
  --bs-secondary-color: #667380;
  --bs-tertiary-color: #8793a0;
  --bs-primary: #557fa8;
  --bs-primary-rgb: 85, 127, 168;
  --bs-secondary: #667380;
  --bs-secondary-rgb: 102, 115, 128;
  --bs-success: #287a58;
  --bs-success-rgb: 40, 122, 88;
  --bs-warning: #b17a1c;
  --bs-warning-rgb: 177, 122, 28;
  --bs-danger: #a84848;
  --bs-danger-rgb: 168, 72, 72;
  --bs-info: #3d8ea3;
  --bs-info-rgb: 61, 142, 163;
  --bs-link-color: #426f9c;
  --bs-link-hover-color: #254f78;
  --bs-border-color: #d8dee5;
  --bs-border-radius: .55rem;
  --bs-border-radius-sm: .35rem;
  --bs-border-radius-lg: .8rem;
  --bs-font-sans-serif: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-font-monospace: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --bm-shadow-sm: 0 3px 14px rgba(20, 28, 36, .08);
  --bm-shadow-md: 0 16px 45px rgba(20, 28, 36, .12);
  --bm-focus: 0 0 0 .22rem rgba(85, 127, 168, .22);
}

[data-bs-theme="dark"] {
  --bm-white: #f4f6f8;
  --bm-paper: #2c2923;
  --bm-ink: #edf2f7;
  --bm-muted: #a5b0bc;
  --bm-panel: #202327;
  --bm-panel-2: #17191c;
  --bm-border: #3a424b;
  --bm-line: #51606f;
  --bm-blue: #a9c3df;
  --bm-blue-strong: #7fb2e3;
  --bm-cyan: #7cc7d8;
  --bm-green: #64c49a;
  --bm-amber: #d8a94a;
  --bm-red: #d57272;
  --bm-graphite: #242629;
  --bm-graphite-2: #111315;

  --bs-body-bg: #111315;
  --bs-body-color: #edf2f7;
  --bs-secondary-color: #a5b0bc;
  --bs-tertiary-color: #7d8a96;
  --bs-primary: #a9c3df;
  --bs-primary-rgb: 169, 195, 223;
  --bs-secondary: #a5b0bc;
  --bs-secondary-rgb: 165, 176, 188;
  --bs-success: #64c49a;
  --bs-success-rgb: 100, 196, 154;
  --bs-warning: #d8a94a;
  --bs-warning-rgb: 216, 169, 74;
  --bs-danger: #d57272;
  --bs-danger-rgb: 213, 114, 114;
  --bs-info: #7cc7d8;
  --bs-info-rgb: 124, 199, 216;
  --bs-link-color: #a9c3df;
  --bs-link-hover-color: #d0e5fb;
  --bs-border-color: #3a424b;
  --bm-shadow-sm: 0 4px 18px rgba(0, 0, 0, .28);
  --bm-shadow-md: 0 20px 60px rgba(0, 0, 0, .38);
  --bm-focus: 0 0 0 .22rem rgba(169, 195, 223, .24);
}

html { scroll-behavior: smooth; }
body {
  letter-spacing: .005em;
  background:
    radial-gradient(circle at top left, rgba(var(--bs-primary-rgb), .11), transparent 34rem),
    var(--bs-body-bg);
}

::selection {
  background: rgba(var(--bs-primary-rgb), .32);
}

/* Header / navbar */
.navbar-32bm {
  --bs-navbar-color: var(--bm-blue);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    linear-gradient(180deg, #373737 0%, #222 54%, #171717 100%);
  border-bottom: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.navbar-32bm .navbar-brand {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: .03em;
}

.navbar-32bm .nav-link {
  position: relative;
  font-weight: 700;
  letter-spacing: .035em;
  padding-inline: .8rem !important;
}

.navbar-32bm .nav-link::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: -.58rem;
  height: 3px;
  border-radius: 99px;
  background: currentColor;
  transform: scaleX(0);
  opacity: .9;
  transition: transform .18s ease;
}

.navbar-32bm .nav-link:hover::after,
.navbar-32bm .nav-link.active::after {
  transform: scaleX(1);
}

.navbar-32bm .navbar-toggler {
  border-color: rgba(255,255,255,.32);
}

.brand-chip-icon {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 2px solid currentColor;
  border-radius: .45rem;
  margin-right: .55rem;
  box-shadow: inset 0 0 0 .28rem rgba(255,255,255,.1);
}

/* Hero */
.hero-32bm {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  background:
    linear-gradient(135deg, rgba(var(--bs-primary-rgb), .16), transparent 44%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(var(--bs-primary-rgb), .06) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(var(--bs-primary-rgb), .05) 31px 32px);
}

.hero-32bm::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 20%, rgba(124, 199, 216, .19), transparent 26rem);
}

.hero-32bm > .container { position: relative; z-index: 1; }

.eyebrow-32bm {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  font-size: .78rem;
}

.eyebrow-32bm::before {
  content: "";
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--bm-green);
  box-shadow: 0 0 0 .25rem rgba(100, 196, 154, .16);
}

.display-32bm {
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: .98;
}

.lead-32bm {
  color: var(--bs-secondary-color);
  max-width: 60rem;
}

/* Cards and sections */
.section-32bm { padding: clamp(3rem, 7vw, 6rem) 0; }

.card-32bm,
.service-card-32bm,
.panel-32bm {
  background: color-mix(in srgb, var(--bm-panel) 94%, transparent);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bm-shadow-sm);
}

.card-32bm,
.service-card-32bm {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card-32bm:hover,
.service-card-32bm:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow-md);
  border-color: rgba(var(--bs-primary-rgb), .45);
}

.service-card-32bm {
  height: 100%;
  padding: 1.35rem;
}

.service-card-32bm .icon-box {
  display: inline-grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: .7rem;
  background: rgba(var(--bs-primary-rgb), .12);
  color: var(--bs-primary);
  border: 1px solid rgba(var(--bs-primary-rgb), .25);
}

.rule-title-32bm {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 800;
}

.rule-title-32bm::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bs-border-color), transparent);
}

/* Buttons */
.btn-32bm-primary {
  --bs-btn-color: #0d1115;
  --bs-btn-bg: var(--bm-blue);
  --bs-btn-border-color: var(--bm-blue);
  --bs-btn-hover-color: #0d1115;
  --bs-btn-hover-bg: #c0d7ef;
  --bs-btn-hover-border-color: #c0d7ef;
  --bs-btn-active-color: #0d1115;
  --bs-btn-active-bg: #d0e5fb;
  --bs-btn-active-border-color: #d0e5fb;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  font-weight: 800;
}

[data-bs-theme="light"] .btn-32bm-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #426f9c;
  --bs-btn-border-color: #426f9c;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #315d88;
  --bs-btn-hover-border-color: #315d88;
}

.btn-32bm-outline {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .12);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), .48);
  font-weight: 750;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  box-shadow: var(--bm-focus);
  border-color: rgba(var(--bs-primary-rgb), .7);
}

/* Technical content */
.code-panel-32bm {
  background: #111315;
  color: #d9e2ec;
  border: 1px solid #3a424b;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bm-shadow-md);
  overflow: hidden;
}

.code-panel-32bm .code-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem .9rem;
  background: linear-gradient(180deg, #2a2e33, #1c1f23);
  border-bottom: 1px solid #3a424b;
  color: #a5b0bc;
  font-family: var(--bs-font-monospace);
  font-size: .82rem;
}

.code-panel-32bm pre {
  margin: 0;
  padding: 1rem;
  color: #d9e2ec;
  font-family: var(--bs-font-monospace);
  font-size: .9rem;
}

.terminal-ok { color: var(--bm-green); }
.terminal-warn { color: var(--bm-amber); }
.terminal-info { color: var(--bm-blue); }

.badge-32bm {
  --bs-badge-color: var(--bs-body-color);
  border: 1px solid rgba(var(--bs-primary-rgb), .32);
  background: rgba(var(--bs-primary-rgb), .1);
  color: var(--bs-body-color);
  font-weight: 700;
}

.kpi-32bm {
  padding: 1.15rem;
  border-left: 4px solid var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .08);
  border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
}

/* Forms */
.form-control,
.form-select {
  background-color: color-mix(in srgb, var(--bm-panel) 92%, transparent);
  border-color: var(--bs-border-color);
}

/* Footer */
.footer-32bm {
  color: #a5b0bc;
  background: linear-gradient(180deg, #202327, #111315);
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer-32bm a { color: #a9c3df; text-decoration: none; }
.footer-32bm a:hover { color: #ffffff; }

/* Utilities */
.text-gradient-32bm {
  background: linear-gradient(90deg, var(--bs-body-color), var(--bs-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.border-dashed-32bm { border-style: dashed !important; }
.mono-32bm { font-family: var(--bs-font-monospace); }

@media (max-width: 991.98px) {
  .navbar-32bm .nav-link::after { bottom: .1rem; }
  .navbar-32bm .nav-link { padding-block: .65rem !important; }
}


/* --------------------------------------------------------------------------
   32bitmicro Theme v1.1: explicit light/dark refinements
   Bootstrap 5.3 native color-mode support: set data-bs-theme="light" or "dark".
   -------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
  color-scheme: light;
  --bm-surface: #f7f8fa;
  --bm-surface-rgb: 247, 248, 250;
  --bm-surface-soft: #eef2f5;
  --bm-surface-code: #111315;
  --bm-panel: #ffffff;
  --bm-panel-rgb: 255, 255, 255;
  --bm-panel-2: #f2f5f7;
  --bm-elevated: #ffffff;
  --bm-ink: #1d232a;
  --bm-muted: #667380;
  --bm-faint: #8793a0;
  --bm-border: #d8dee5;
  --bm-border-strong: #b9c5d1;
  --bm-grid-alpha: .060;
  --bm-glow-alpha: .115;
  --bm-navbar-bg-1: #3b3f44;
  --bm-navbar-bg-2: #24272b;
  --bm-navbar-bg-3: #17191c;
  --bm-hero-bg-1: rgba(85, 127, 168, .14);
  --bm-hero-bg-2: rgba(124, 199, 216, .12);
  --bm-card-hover-border: rgba(85, 127, 168, .48);
  --bm-code-bg: #111315;
  --bm-code-title: #202327;
  --bm-code-text: #d9e2ec;
  --bm-code-muted: #a5b0bc;
  --bm-footer-bg-1: #24272b;
  --bm-footer-bg-2: #111315;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --bm-surface: #111315;
  --bm-surface-rgb: 17, 19, 21;
  --bm-surface-soft: #17191c;
  --bm-surface-code: #0b0d0f;
  --bm-panel: #202327;
  --bm-panel-rgb: 32, 35, 39;
  --bm-panel-2: #17191c;
  --bm-elevated: #262b31;
  --bm-ink: #edf2f7;
  --bm-muted: #a5b0bc;
  --bm-faint: #7d8a96;
  --bm-border: #3a424b;
  --bm-border-strong: #51606f;
  --bm-grid-alpha: .085;
  --bm-glow-alpha: .18;
  --bm-navbar-bg-1: #30353b;
  --bm-navbar-bg-2: #1c2025;
  --bm-navbar-bg-3: #0d0f12;
  --bm-hero-bg-1: rgba(169, 195, 223, .13);
  --bm-hero-bg-2: rgba(124, 199, 216, .16);
  --bm-card-hover-border: rgba(169, 195, 223, .52);
  --bm-code-bg: #0b0d0f;
  --bm-code-title: #171b20;
  --bm-code-text: #d9e2ec;
  --bm-code-muted: #a5b0bc;
  --bm-footer-bg-1: #202327;
  --bm-footer-bg-2: #0b0d0f;
}

body {
  background:
    radial-gradient(circle at top left, rgba(var(--bs-primary-rgb), var(--bm-glow-alpha)), transparent 34rem),
    linear-gradient(180deg, var(--bm-surface), var(--bs-body-bg));
}

.navbar-32bm {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--bm-navbar-bg-1) 0%, var(--bm-navbar-bg-2) 54%, var(--bm-navbar-bg-3) 100%);
}

.hero-32bm {
  background:
    linear-gradient(135deg, var(--bm-hero-bg-1), transparent 44%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(var(--bs-primary-rgb), var(--bm-grid-alpha)) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(var(--bs-primary-rgb), calc(var(--bm-grid-alpha) * .85)) 31px 32px),
    var(--bs-body-bg);
}

.hero-32bm::before {
  background: radial-gradient(circle at 72% 20%, var(--bm-hero-bg-2), transparent 26rem);
}

.card-32bm,
.service-card-32bm,
.panel-32bm,
.accordion-32bm .accordion-item {
  background: color-mix(in srgb, var(--bm-panel) 96%, transparent);
  border-color: var(--bm-border);
}

.card-32bm:hover,
.service-card-32bm:hover {
  border-color: var(--bm-card-hover-border);
}

[data-bs-theme="light"] .card-32bm,
[data-bs-theme="light"] .service-card-32bm,
[data-bs-theme="light"] .panel-32bm {
  box-shadow: 0 5px 20px rgba(20, 28, 36, .075);
}

[data-bs-theme="dark"] .card-32bm,
[data-bs-theme="dark"] .service-card-32bm,
[data-bs-theme="dark"] .panel-32bm {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

.code-panel-32bm {
  background: var(--bm-code-bg);
  color: var(--bm-code-text);
  border-color: var(--bm-border);
}

.code-panel-32bm .code-titlebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bm-code-title) 92%, white), var(--bm-code-title));
  border-bottom-color: var(--bm-border);
  color: var(--bm-code-muted);
}

.footer-32bm {
  background: linear-gradient(180deg, var(--bm-footer-bg-1), var(--bm-footer-bg-2));
}

/* Bootstrap component refinements */
.dropdown-menu,
.modal-content,
.offcanvas,
.toast,
.popover {
  background-color: var(--bm-elevated);
  border-color: var(--bm-border);
  box-shadow: var(--bm-shadow-md);
}

.table-32bm {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bm-border);
}

.accordion-32bm {
  --bs-accordion-bg: var(--bm-panel);
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-border-color: var(--bm-border);
  --bs-accordion-active-bg: rgba(var(--bs-primary-rgb), .12);
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-btn-focus-box-shadow: var(--bm-focus);
}

.list-group-32bm {
  --bs-list-group-bg: var(--bm-panel);
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-color: var(--bm-border);
  --bs-list-group-action-hover-bg: rgba(var(--bs-primary-rgb), .10);
}

.alert-32bm {
  --bs-alert-bg: rgba(var(--bs-primary-rgb), .10);
  --bs-alert-color: var(--bs-body-color);
  --bs-alert-border-color: rgba(var(--bs-primary-rgb), .30);
}

.form-control::placeholder { color: var(--bm-faint); }

/* Theme-control helper */
.theme-toggle-32bm {
  border: 1px solid rgba(var(--bs-primary-rgb), .38);
  background: rgba(var(--bs-primary-rgb), .10);
  color: var(--bs-body-color);
  border-radius: 999px;
  padding: .4rem .75rem;
  font-weight: 800;
}
.theme-toggle-32bm:hover { background: rgba(var(--bs-primary-rgb), .18); }

/* Optional forced color sections, useful for side-by-side previews. */
.force-light-32bm {
  color-scheme: light;
  background: #f7f8fa;
  color: #1d232a;
}
.force-dark-32bm {
  color-scheme: dark;
  background: #111315;
  color: #edf2f7;
}