@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.sidebar {
    background-color: #125ea0;
}

.sidebar .top-row {
    background-color: rgba(0,0,0,0.4);
}

.sidebar .navbar-brand {
    font-size: 1.1rem;
}

.sidebar .oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.sidebar .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.sidebar .nav-item:first-of-type {
    padding-top: 1rem;
}

.sidebar .nav-item:last-of-type {
    padding-bottom: 1rem;
}

.sidebar .nav-item a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.sidebar .nav-item a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.sidebar .nav-item a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}


/* =============================================
   Orderlink Enterprise Design System (OEDS)
   Fortune-500 style tokens, helpers, and base styling
   Non-breaking, global layer over Bootstrap & Radzen
   ============================================= */

/* 1) GLOBAL TOKENS */
:root {
    /* Brand */
    --ol-brand-50:  #eef5ff;
    --ol-brand-100: #d9e9ff;
    --ol-brand-200: #b6d3ff;
    --ol-brand-300: #84b5ff;
    --ol-brand-400: #4d92f5;
    --ol-brand-500: #0a66c2; /* Primary */
    --ol-brand-600: #095aaa;
    --ol-brand-700: #084a8c;
    --ol-brand-800: #073b71;
    --ol-brand-900: #062f5b;

    /* Semantic */
    --ol-success: #16a34a;
    --ol-warning: #d97706;
    --ol-danger:  #dc2626;
    --ol-info:    #0284c7;

    /* Grays */
    --ol-gray-50:#f9fafb; --ol-gray-100:#f3f4f6; --ol-gray-200:#e5e7eb; --ol-gray-300:#d1d5db;
    --ol-gray-400:#9ca3af; --ol-gray-500:#6b7280; --ol-gray-600:#4b5563; --ol-gray-700:#374151;
    --ol-gray-800:#1f2937; --ol-gray-900:#111827;

    /* Text & Surfaces */
    --ol-text:        var(--ol-gray-900);
    --ol-text-muted:  var(--ol-gray-600);
    --ol-text-invert: #ffffff;
    --ol-surface:     #ffffff;
    --ol-surface-2:   #fcfcfd;
    --ol-elevated:    #ffffff;
    --ol-border:      var(--ol-gray-200);

    /* Interaction */
    --ol-primary:     var(--ol-brand-500);
    --ol-primary-ink: #ffffff;
    --ol-focus:       rgba(10, 102, 194, 0.18);

    /* Metrics */
    --ol-radius-sm: 6px;
    --ol-radius-md: 10px;
    --ol-radius-lg: 12px;
    --ol-shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
    --ol-shadow-md: 0 4px 10px rgba(0,0,0,0.10);
    --ol-shadow-lg: 0 10px 24px rgba(0,0,0,0.12);
    --ol-touch: 44px; /* min hit size */

    /* Typography */
    --ol-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --ol-font-size-12: 12px;
    --ol-font-size-14: 14px;
    --ol-font-size-16: 16px;
    --ol-font-size-18: 18px;
    --ol-font-size-20: 20px;
    --ol-line-compact: 1.2;
    --ol-line-default: 1.5;

    /* Spacing (8px base) */
    --ol-space-1: 4px;  --ol-space-2: 8px;  --ol-space-3: 12px; --ol-space-4: 16px;
    --ol-space-5: 20px; --ol-space-6: 24px; --ol-space-8: 32px; --ol-space-10: 40px;
}

/* 2) DARK MODE (opt-in) */
[data-theme="dark"] {
    --ol-text:        #e5e7eb;
    --ol-text-muted:  #9ca3af;
    --ol-surface:     #111827;
    --ol-surface-2:   #0b1220;
    --ol-elevated:    #111827;
    --ol-border:      #1f2937;
    --ol-focus:       rgba(59, 130, 246, 0.30);
}

/* 3) BASE ELEMENTS */
html, body { height: 100%; }
body {
    font-family: var(--ol-font-sans);
    font-size: var(--ol-font-size-16);
    line-height: var(--ol-line-default);
    color: var(--ol-text);
    background: var(--ol-surface-2);
}

h1, h2, h3, h4, h5 { color: var(--ol-text); line-height: var(--ol-line-compact); margin: 0 0 var(--ol-space-3); }
.small, small { font-size: var(--ol-font-size-12); color: var(--ol-text-muted); }

/* Focus visible: accessible ring */
:where(button, a, input, select, textarea, [tabindex]):focus { outline: none; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    box-shadow: 0 0 0 3px var(--ol-focus);
    border-radius: var(--ol-radius-sm);
}

/* 4) ENTERPRISE HELPERS */
/* Buttons */
.ol-btn { height: var(--ol-touch); padding: 0 var(--ol-space-4); border-radius: var(--ol-radius-sm);
    border: 1px solid var(--ol-border); font-weight: 600; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.ol-btn:active { transform: translateY(1px); }
.ol-btn--primary { background: var(--ol-primary); color: var(--ol-primary-ink); border-color: var(--ol-primary); }
.ol-btn--danger  { background: var(--ol-danger);  color: #fff; border-color: var(--ol-danger); }
.ol-btn--outline { background: transparent; color: var(--ol-text); }
.ol-btn--ghost   { background: transparent; border-color: transparent; color: var(--ol-text); }
.ol-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Inputs */
.ol-input { height: var(--ol-touch); border-radius: 999px; border: 1px solid var(--ol-border);
    background: #fff; padding: 0 var(--ol-space-4); color: var(--ol-text); transition: border-color .15s ease, box-shadow .15s ease; }
.ol-input:focus { border-color: var(--ol-primary); box-shadow: 0 0 0 3px var(--ol-focus); }
.ol-input--sm { height: 36px; border-radius: var(--ol-radius-sm); }

/* Cards */
.ol-card { background: var(--ol-surface); border: 1px solid var(--ol-border);
    border-radius: var(--ol-radius-lg); box-shadow: var(--ol-shadow-md); }
.ol-card__body { padding: var(--ol-space-5); }
.ol-card__header { padding: var(--ol-space-5) var(--ol-space-5) var(--ol-space-3); font-weight: 600; }
.ol-card__footer { padding: var(--ol-space-4) var(--ol-space-5); border-top: 1px solid var(--ol-border); }

/* Chips */
.ol-chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 10px;
    font-size: var(--ol-font-size-12); border:1px solid var(--ol-border); }
.ol-chip--info    { background: var(--ol-brand-50);  color: var(--ol-brand-700); }
.ol-chip--warn    { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.ol-chip--danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ol-chip--success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }

/* Grid Helpers */
.ol-grid { display:grid; grid-template-columns: 1fr; gap: var(--ol-space-4); }
@media (min-width:480px){ .ol-grid--sm-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .ol-grid--lg-3 { grid-template-columns: repeat(3,1fr); } }

/* 5) RADZEN INTEGRATION */
:where(.rz-inputtext, .rz-dropdown, .rz-multiselect) {
    height: var(--ol-touch);
    border-radius: var(--ol-radius-sm);
    border-color: var(--ol-border);
}
:where(.rz-inputtext:focus, .rz-dropdown:focus, .rz-multiselect:focus) {
    box-shadow: 0 0 0 3px var(--ol-focus);
    border-color: var(--ol-primary);
}
.rz-button.rz-primary { background: var(--ol-primary); border-color: var(--ol-primary); color: var(--ol-primary-ink); }
.rz-button.rz-danger  { background: var(--ol-danger);  border-color: var(--ol-danger);  color: #fff; }

/* 6) OPTIONAL TRANSITIONS */
.ol-btn, .ol-input { transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease; }


/* 7) BOOTSTRAP MAPPING TO TOKENS (non-breaking) */
a, .btn-link { color: var(--ol-primary); }

.btn-primary { background: var(--ol-primary); border-color: var(--ol-primary); color: var(--ol-primary-ink); }
.btn-primary:hover, .btn-primary:focus { filter: brightness(0.95); }

.btn-outline-primary { color: var(--ol-primary); border-color: var(--ol-primary); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--ol-primary); color: var(--ol-primary-ink); }

.btn-danger { background: var(--ol-danger); border-color: var(--ol-danger); color: #fff; }
.btn-outline-danger { color: var(--ol-danger); border-color: var(--ol-danger); }
.btn-outline-danger:hover, .btn-outline-danger:focus { background: var(--ol-danger); color: #fff; }

/* Bootstrap form controls */
.form-control {
    min-height: var(--ol-touch);
    border-radius: var(--ol-radius-sm);
    border-color: var(--ol-border);
}
.form-control:focus {
    border-color: var(--ol-primary);
    box-shadow: 0 0 0 3px var(--ol-focus);
}

/* Align default sidebar color to brand */
.sidebar { background-color: var(--ol-brand-700); }


/* 5b) Additional Radzen normalization and global cohesion */
/* Cards */
.rz-card { background: var(--ol-surface); border: 1px solid var(--ol-border); border-radius: var(--ol-radius-lg); box-shadow: var(--ol-shadow-sm); }
.rz-card-body { padding: var(--ol-space-5); }

/* Badges */
.rz-badge { border-radius: 999px; font-size: var(--ol-font-size-12); padding: 2px 10px; border: 1px solid var(--ol-border); }

/* Dialogs */
.rz-dialog { border-radius: var(--ol-radius-lg); }
.rz-dialog-titlebar { padding: var(--ol-space-4) var(--ol-space-5); border-bottom: 1px solid var(--ol-border); }
.rz-dialog-content { padding: var(--ol-space-5); }
.rz-dialog .rz-button { height: var(--ol-touch); }

/* TextAreas */
textarea.rz-inputtext { min-height: 120px; border-radius: var(--ol-radius-sm); border-color: var(--ol-border); }
textarea.rz-inputtext:focus { border-color: var(--ol-primary); box-shadow: 0 0 0 3px var(--ol-focus); }

/* Layout cohesion */
.main { background: var(--ol-surface-2); }
.content { padding-top: var(--ol-space-5); }
.sticky-top { background: var(--ol-surface); }

/* Tables (Bootstrap) */
.table { border-color: var(--ol-border); }
.table thead th { background: var(--ol-gray-50); color: var(--ol-text); }
.table td, .table th { border-color: var(--ol-border); padding: 12px 16px; }

/* Horizontal rule */
hr { border-color: var(--ol-border); }
/* ============================================================
   OrderLink Global Theme — Bootstrap 5.3+ (CSS‑only)
   Refined, calm, enterprise‑ready styling using CSS variables
   Palette inspired by gdibarbados.com, tuned for WCAG AA
   This file loads AFTER Bootstrap and overrides variables/classes
   ============================================================

   Final HEX Palette (AA‑validated for intended uses)
   Primary scale:
   --brand-primary:        #1C6FB3
   --brand-primary-hover:  #175F98
   --brand-primary-active: #114D7B

   Secondary:
   --brand-secondary:      #6B7A8C

   Neutrals (100–900):
   --brand-gray-100: #E9EDF2
   --brand-gray-200: #D4DAE0
   --brand-gray-300: #A9B3BE
   --brand-gray-400: #7C8896
   --brand-gray-500: #56606B
   --brand-gray-600: #3B4149
   --brand-gray-700: #2A2E34
   --brand-gray-800: #1A1D21
   --brand-gray-900: #0D0F12
   Body:
   --brand-body-bg:   #F7F9FB
   --brand-body-color:#1A1D21

   Feedback:
   --brand-success:   #2F855A
   --brand-warning:   #B7791F
   --brand-danger:    #C53030
   --brand-info:      #2B6CB0
   ============================================================ */

:root {
  /* Brand tokens */
  --brand-primary:        #1C6FB3;
  --brand-primary-hover:  #175F98;
  --brand-primary-active: #114D7B;
  --brand-secondary:      #6B7A8C;

  --brand-gray-100: #E9EDF2;
  --brand-gray-200: #D4DAE0;
  --brand-gray-300: #A9B3BE;
  --brand-gray-400: #7C8896;
  --brand-gray-500: #56606B;
  --brand-gray-600: #3B4149;
  --brand-gray-700: #2A2E34;
  --brand-gray-800: #1A1D21;
  --brand-gray-900: #0D0F12;

  --brand-body-bg:    #F7F9FB;
  --brand-body-color: #1A1D21;

  --brand-success: #2F855A;
  --brand-warning: #B7791F;
  --brand-danger:  #C53030;
  --brand-info:    #2B6CB0;

  /* Typography */
  --app-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  /* Radii & Shadows (understated) */
  --app-radius-sm: .375rem; /* 6px */
  --app-radius:    .5rem;   /* 8px */
  --app-radius-lg: .75rem;  /* 12px */

  --app-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.08);
  --app-shadow:    0 .5rem 1rem rgba(0,0,0,.10);
  --app-shadow-lg: 0 1rem 2rem rgba(0,0,0,.12);

  /* Map to Bootstrap CSS variables */
  --bs-primary:          var(--brand-primary);
  --bs-primary-rgb:      28, 111, 179;
  --bs-secondary:        var(--brand-secondary);
  --bs-body-bg:          var(--brand-body-bg);
  --bs-body-color:       var(--brand-body-color);
  --bs-border-color:     var(--brand-gray-200);
  --bs-tertiary-bg:      var(--brand-gray-100);

  --bs-success: var(--brand-success);
  --bs-warning: var(--brand-warning);
  --bs-danger:  var(--brand-danger);
  --bs-info:    var(--brand-info);

  --bs-link-color:       var(--bs-primary);
  --bs-link-hover-color: var(--brand-primary-hover);

  --bs-body-font-family: var(--app-font-sans);
  --bs-body-font-size:   1rem;
  --bs-body-line-height: 1.6;

  --bs-border-radius-sm: var(--app-radius-sm);
  --bs-border-radius:    var(--app-radius);
  --bs-border-radius-lg: var(--app-radius-lg);

  --bs-box-shadow-sm: var(--app-shadow-sm);
  --bs-box-shadow:    var(--app-shadow);
  --bs-box-shadow-lg: var(--app-shadow-lg);

  --bs-focus-ring-width: .2rem;
  --bs-focus-ring-opacity: .35;
  --bs-focus-ring-color: rgba(28,111,179,.35);
}

/* Attribute-based Dark Mode */
[data-theme="dark"] {
  --bs-body-bg:        #0F1216;
  --bs-body-color:     #E6EAEE;
  --bs-border-color:   #2A2E34;
  --bs-tertiary-bg:    #1A1D21;
  --bs-primary:        #5AA0D6; /* lighter primary for dark surfaces */
  --bs-link-color:     var(--bs-primary);
  --bs-link-hover-color: #3C84BD;

  /* Keep semantic colors readable on dark surfaces */
  --bs-success: #49A97A;
  --bs-warning: #D49A42;
  --bs-danger:  #E05A5A;
  --bs-info:    #62A0E0;

  color-scheme: dark;
}

/* Base element adjustments tied to variables */
html, body { background-color: var(--bs-body-bg); color: var(--bs-body-color); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--bs-focus-ring-color);
  outline-offset: 2px;
}

/* LINKS */
a { color: var(--bs-link-color); text-underline-offset: .15em; }
a:hover { color: var(--bs-link-hover-color); }

/* ============== COMPONENT REFINEMENTS ============== */

/* Buttons */
.btn { font-weight: 600; border-radius: var(--bs-border-radius); transition: box-shadow .2s ease, background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease; }
.btn:focus-visible { box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); }
.btn:hover { box-shadow: var(--bs-box-shadow-sm); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-active);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
}

/* Secondary button slightly muted */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: #5E6B7B;
  --bs-btn-hover-border-color: #5E6B7B;
}

/* Forms */
.form-label { font-weight: 600; margin-bottom: .35rem; }
.form-control,
.form-select,
.form-check-input {
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.form-control::placeholder { color: var(--brand-gray-500); opacity: 1; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary-hover);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Validation */
.is-valid, .was-validated .form-control:valid { border-color: var(--brand-success) !important; }
.is-invalid, .was-validated .form-control:invalid { border-color: var(--brand-danger) !important; }
.valid-feedback, .invalid-feedback { font-size: .875rem; margin-top: .35rem; }
.valid-feedback { color: var(--brand-success); }
.invalid-feedback { color: var(--brand-danger); }
.validation-message { color: var(--brand-danger); font-size: .875rem; margin-top: .35rem; }

/* Navbar / Nav / Breadcrumbs */
.navbar { background-color: #fff; border-bottom: 1px solid var(--bs-border-color); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
[data-theme="dark"] .navbar { background-color: #14181D; }
.navbar .nav-link { color: var(--bs-body-color); opacity: .9; }
.navbar .nav-link:hover { color: var(--bs-link-hover-color); }
.navbar .nav-link.active, .nav-link.active { color: var(--brand-primary); position: relative; }
.navbar .nav-link.active::after, .nav-link.active::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .25rem; height: 2px; background: var(--brand-primary); border-radius: 2px; }

.breadcrumb { --bs-breadcrumb-divider-color: var(--brand-gray-400); --bs-breadcrumb-item-active-color: var(--brand-gray-700); font-size: .95rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--brand-gray-400); }

/* Surfaces */
.card { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow-sm); }
.card-header { background: var(--bs-body-bg); font-weight: 600; }
.modal-content { border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow-lg); }
.tooltip .tooltip-inner { border-radius: var(--bs-border-radius-sm); background-color: var(--brand-gray-800); color: #fff; }

/* Tables */
.table { --bs-table-color: var(--bs-body-color); --bs-table-striped-bg: #EEF2F6; --bs-table-hover-bg: #E6ECF2; border-color: var(--bs-border-color); }
.table thead th { font-weight: 600; color: var(--brand-gray-700); }
.table td, .table th { padding: .75rem 1rem; vertical-align: middle; }

/* Alerts / Badges / Toasts */
.alert { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow-sm); }
.alert-primary { background: #E8F1F9; color: var(--brand-primary-active); border-color: #9EC4E6; }
.alert-success { background: #E7F4ED; color: #1f5d3f; border-color: #A9DCC3; }
.alert-warning { background: #FBF1DF; color: #6c4a12; border-color: #E7C79B; }
.alert-danger  { background: #FBEAEA; color: #7b1f1f; border-color: #E7A6A6; }
.alert-info    { background: #E8F0FB; color: #1f4770; border-color: #A7BFEA; }

.badge { border-radius: var(--bs-border-radius-sm); font-weight: 600; }
.toast { border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow); }

/* Blazor conventions */
.blazor-error-boundary, #blazor-error-ui { background: #FBEAEA; color: #7b1f1f; border: 1px solid #E7A6A6; padding: .75rem 1rem; border-radius: var(--bs-border-radius); }
#blazor-error-ui { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; box-shadow: 0 -6px 16px rgba(0,0,0,.08); }
#blazor-error-ui .dismiss { cursor: pointer; }

/* Accessibility tweaks */
.btn, .form-control, .form-select, .form-check-input, .nav-link, a { min-height: 2.25rem; }

/* Optional calm sidebar if present */
.sidebar { background-color: var(--brand-primary-active); }
.sidebar .nav-item a { color: #e6eef7; }
.sidebar .nav-item a.active, .sidebar .nav-item a:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* Tooltip theming for dark mode */
[data-theme="dark"] .tooltip .tooltip-inner { background-color: #0E1116; color: #EFF3F6; }

/* ============== END COMPONENT REFINEMENTS ============== */

/* README — Theme Usage

1) Build/Minify
   - This file is plain CSS and can be minified to wwwroot/css/app.min.css using any minifier.
   - Example (PowerShell with dotnet-ef not required): Use your preferred pipeline or a VS/Rider plugin.

2) Integration (Blazor + Bootstrap 5.3+)
   - Ensure Bootstrap CSS is included (bundled or CDN).
   - Include this file AFTER Bootstrap so variable overrides take effect.
   - In index.html or _Host.cshtml:
       <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
       <link rel="stylesheet" href="css/app.css" />

3) Dark Mode
   - Opt-in via a root attribute on <html> or <body>:
       <body data-theme="dark">
   - Remove the attribute or set data-theme="light" to return to light mode.

4) WCAG Notes
   - Body text on body bg meets AA.
   - Primary button text contrast passes AA.
   - Alert/badge foregrounds chosen for readability.

5) Tokens
   - Brand tokens are defined in :root as --brand-*.
   - Mapped to Bootstrap via --bs-* variables to minimize overrides.

*/