/* =============================================
   MIDNETTE DESIGN TOKENS
   Brand: Midnette — "The Backroom" voice
   Primary: Navy #02184b (unchanged — anchors nav and deep accents)
   Accent:  Ember #d98947 (formerly gold)
   Theme:   Midnight Backroom — dark ink body, ember accent, paper text

   This file loads AFTER bootstrap.min.css and
   BEFORE app.css. It overrides Bootstrap 5.3
   CSS variables and adds Midnette-specific tokens.
   ============================================= */

:root {
    /* --- Brand Colors --- */
    --mn-navy:            #02184b;
    --mn-navy-light:      #0a2d6e;
    --mn-navy-lighter:    #163d8a;
    --mn-navy-dark:       #010f30;
    --mn-navy-rgb:        2, 24, 75;

    /* Accent retains --mn-gold-* variable names for source compatibility;
       values now map to the Backroom "ember" family. */
    --mn-gold:            #d98947;
    --mn-gold-light:      #e0c88c;
    --mn-gold-lighter:    #f0e4c4;
    --mn-gold-dark:       #a86834;
    --mn-gold-darkest:    #7d4e26;
    --mn-gold-rgb:        217, 137, 71;

    /* --- Semantic Colors — brightened for dark-surface contrast --- */
    --mn-success:         #4a8f5e;
    --mn-success-light:   #173625;
    --mn-success-dark:    #7fb993;
    --mn-success-rgb:     74, 143, 94;

    --mn-warning:         #d98947;
    --mn-warning-light:   #3a2d14;
    --mn-warning-dark:    #f0d090;
    --mn-warning-rgb:     217, 137, 71;

    --mn-danger:          #a83a4a;
    --mn-danger-light:    #3a1820;
    --mn-danger-dark:     #e8a0a8;
    --mn-danger-rgb:      168, 58, 74;

    --mn-info:            #3a7b9a;
    --mn-info-light:      #0e2a38;
    --mn-info-dark:       #8bcde0;
    --mn-info-rgb:        58, 123, 154;

    /* --- Neutral Scale — inverted so 50=subtlest-bg, 900=primary-text.
         Downstream code that says bg-gray-100 etc. flips coherently. --- */
    --mn-gray-50:         #1a1625;
    --mn-gray-100:        #1f1b16;
    --mn-gray-200:        #352f28;
    --mn-gray-300:        #4f4940;
    --mn-gray-400:        #6d665c;
    --mn-gray-500:        #918a7e;
    --mn-gray-600:        #b8b2a6;
    --mn-gray-700:        #d5d0c7;
    --mn-gray-800:        #e8e4dd;
    --mn-gray-900:        #f5f2ed;

    /* --- Surface Colors (ink family) --- */
    --mn-bg-body:         #0b0a14;
    --mn-bg-surface:      #15121f;
    --mn-bg-surface-alt:  #1f1a2e;
    --mn-bg-elevated:     #1a1625;
    --mn-bg-inset:        #120f1b;
    --mn-bg-overlay:      rgba(0, 0, 0, 0.7);

    /* --- Border Colors (warm-paper lines at low alpha) --- */
    --mn-border-default:  rgba(240, 232, 216, 0.10);
    --mn-border-light:    rgba(240, 232, 216, 0.05);
    --mn-border-strong:   rgba(240, 232, 216, 0.20);
    --mn-border-focus:    #d98947;

    /* --- Text Colors (paper on ink) --- */
    --mn-text-primary:    #f0e8d8;
    --mn-text-secondary:  rgba(240, 232, 216, 0.70);
    --mn-text-tertiary:   rgba(240, 232, 216, 0.45);
    --mn-text-inverse:    #1f1b16;
    --mn-text-link:       #e0c88c;
    --mn-text-link-hover: #f0e4c4;

    /* --- Bootstrap 5 Variable Overrides --- */
    --bs-primary:         #02184b;
    --bs-primary-rgb:     2, 24, 75;
    --bs-secondary:       #918a7e;
    --bs-secondary-rgb:   145, 138, 126;
    --bs-success:         #4a8f5e;
    --bs-success-rgb:     74, 143, 94;
    --bs-info:            #3a7b9a;
    --bs-info-rgb:        58, 123, 154;
    --bs-warning:         #d98947;
    --bs-warning-rgb:     217, 137, 71;
    --bs-danger:          #a83a4a;
    --bs-danger-rgb:      168, 58, 74;
    /* --bs-light/--bs-dark keep classical meaning — light = paper tone, dark = ink tone.
       Components use .bg-warning .text-dark (dark text on ember bg) and need genuine dark. */
    --bs-light:           #f0e8d8;
    --bs-light-rgb:       240, 232, 216;
    --bs-dark:            #1f1b16;
    --bs-dark-rgb:        31, 27, 22;

    --bs-body-color:      #f0e8d8;
    --bs-body-color-rgb:  240, 232, 216;
    --bs-body-bg:         #0b0a14;
    --bs-body-bg-rgb:     11, 10, 20;

    --bs-emphasis-color:      #f0e8d8;
    --bs-secondary-color:     rgba(240, 232, 216, 0.70);
    --bs-tertiary-color:      rgba(240, 232, 216, 0.45);
    --bs-secondary-bg:        #1f1a2e;
    --bs-tertiary-bg:         #15121f;

    --bs-heading-color:       #f0e8d8;

    --bs-link-color:          #e0c88c;
    --bs-link-color-rgb:      224, 200, 140;
    --bs-link-hover-color:    #f0e4c4;
    --bs-link-hover-color-rgb: 240, 228, 196;

    --bs-border-color:        rgba(240, 232, 216, 0.10);
    --bs-border-color-translucent: rgba(240, 232, 216, 0.08);

    --bs-code-color:          #e8a0a8;

    /* Code tags inside colored-background wrappers should inherit the wrapper's text color
       so they stay readable on ember / navy / success fills. */

    /* Subtle bg overrides for alerts/badges — dark-tinted variants */
    --bs-primary-text-emphasis:   #9baecb;
    --bs-primary-bg-subtle:       #1a2348;
    --bs-primary-border-subtle:   #2a3a6a;
    --bs-success-text-emphasis:   #7fb993;
    --bs-success-bg-subtle:       #173625;
    --bs-success-border-subtle:   #2d4e3a;
    --bs-warning-text-emphasis:   #f0d090;
    --bs-warning-bg-subtle:       #3a2d14;
    --bs-warning-border-subtle:   #594a2a;
    --bs-danger-text-emphasis:    #e8a0a8;
    --bs-danger-bg-subtle:        #3a1820;
    --bs-danger-border-subtle:    #5c2a33;
    --bs-info-text-emphasis:      #8bcde0;
    --bs-info-bg-subtle:          #0e2a38;
    --bs-info-border-subtle:      #1f4a5e;

    /* Focus ring */
    --bs-focus-ring-color: rgba(217, 137, 71, 0.35);

    /* --- Typography Tokens --- */
    --mn-font-body:       'Merriweather', Georgia, 'Times New Roman', serif;
    --mn-font-accent:     'Pirata One', cursive;
    --mn-font-system:     system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mn-font-mono:       'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

    --bs-body-font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
    --bs-body-font-size:   1rem;
    --bs-body-line-height: 1.65;

    /* Type Scale (Major Third ~1.25 ratio) */
    --mn-text-xs:         0.75rem;
    --mn-text-sm:         0.875rem;
    --mn-text-base:       1rem;
    --mn-text-lg:         1.125rem;
    --mn-text-xl:         1.25rem;
    --mn-text-2xl:        1.5rem;
    --mn-text-3xl:        1.875rem;
    --mn-text-4xl:        2.25rem;
    --mn-text-5xl:        3rem;
    --mn-text-6xl:        3.75rem;

    /* Line Heights */
    --mn-leading-none:    1;
    --mn-leading-tight:   1.25;
    --mn-leading-snug:    1.375;
    --mn-leading-normal:  1.65;
    --mn-leading-relaxed: 1.75;
    --mn-leading-loose:   2;

    /* Font Weights */
    --mn-font-light:      300;
    --mn-font-regular:    400;
    --mn-font-medium:     500;
    --mn-font-semibold:   600;
    --mn-font-bold:       700;

    /* --- Spacing Scale (4px base) --- */
    --mn-space-0:   0;
    --mn-space-1:   0.25rem;
    --mn-space-2:   0.5rem;
    --mn-space-3:   0.75rem;
    --mn-space-4:   1rem;
    --mn-space-5:   1.25rem;
    --mn-space-6:   1.5rem;
    --mn-space-8:   2rem;
    --mn-space-10:  2.5rem;
    --mn-space-12:  3rem;
    --mn-space-16:  4rem;
    --mn-space-20:  5rem;
    --mn-space-24:  6rem;

    /* --- Shadow Scale — deeper tints for visibility on dark surfaces --- */
    --mn-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.30);
    --mn-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --mn-shadow-md:    0 4px 6px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25);
    --mn-shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.45), 0 4px 6px rgba(0, 0, 0, 0.25);
    --mn-shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.50), 0 8px 10px rgba(0, 0, 0, 0.25);
    --mn-shadow-2xl:   0 25px 50px rgba(0, 0, 0, 0.55);
    --mn-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.30);
    --mn-shadow-gold:  0 4px 14px rgba(217, 137, 71, 0.35);
    --mn-shadow-navy:  0 4px 14px rgba(2, 24, 75, 0.45);

    /* --- Border Radius Scale --- */
    --mn-radius-none: 0;
    --mn-radius-sm:   0.25rem;
    --mn-radius-md:   0.375rem;
    --mn-radius-lg:   0.5rem;
    --mn-radius-xl:   0.75rem;
    --mn-radius-2xl:  1rem;
    --mn-radius-3xl:  1.5rem;
    --mn-radius-full: 9999px;

    /* --- Transition Tokens --- */
    --mn-transition-fast:   150ms ease;
    --mn-transition-base:   250ms ease;
    --mn-transition-slow:   350ms ease;
    --mn-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Z-Index Scale --- */
    --mn-z-dropdown:   1000;
    --mn-z-sticky:     1020;
    --mn-z-fixed:      1030;
    --mn-z-drawer:     1035;
    --mn-z-modal-bg:   1040;
    --mn-z-modal:      1050;
    --mn-z-popover:    1060;
    --mn-z-tooltip:    1070;
    --mn-z-toast:      1080;

    /* --- Container Max Widths --- */
    --mn-max-width-prose:    65ch;
    --mn-max-width-content:  960px;
    --mn-max-width-wide:     1200px;

    /* --- Chart & Dashboard Tokens ---
       Values tuned for dark surfaces (--mn-bg-surface / --mn-bg-elevated).
       Raw brand navy (#02184b) is invisible on the dark page background — chart
       elements use a lifted paper-tinted blue instead. Ember/gold reads fine as-is. */
    --mn-chart-navy:        #7a9ce0;
    --mn-chart-gold:        #d98947;
    --mn-chart-success:     #7fb993;
    --mn-chart-info:        #8bcde0;
    --mn-chart-warning:     #f0d090;
    --mn-chart-danger:      #e8a0a8;
    --mn-chart-gray:        #b8b2a6;
    --mn-chart-navy-alpha:  rgba(122, 156, 224, 0.20);
    --mn-chart-gold-alpha:  rgba(217, 137, 71, 0.22);
    --mn-chart-grid:        rgba(240, 232, 216, 0.10);
    --mn-chart-font:        'Merriweather', Georgia, serif;

    /* --- Header / Nav Tokens (navy anchors the chrome) --- */
    --mn-header-height:         72px;
    --mn-header-height-compact: 56px;
    --mn-header-bg:             #02184b;
    --mn-header-text:           #f0e8d8;
    --mn-header-accent:         #d98947;
}


/* =============================================
   COMPONENT-LEVEL BOOTSTRAP OVERRIDES
   These style Bootstrap components to match Midnette
   ============================================= */

/* --- Buttons: Primary = Navy --- */
.btn-primary {
    --bs-btn-bg: var(--mn-navy);
    --bs-btn-border-color: var(--mn-navy);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--mn-navy-light);
    --bs-btn-hover-border-color: var(--mn-navy-light);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--mn-navy-dark);
    --bs-btn-active-border-color: var(--mn-navy-dark);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: var(--mn-gray-400);
    --bs-btn-disabled-border-color: var(--mn-gray-400);
    --bs-btn-disabled-color: var(--mn-gray-600);
}

.btn-outline-primary {
    /* On dark theme, navy text is invisible — lift to paper-tinted blue. Border stays navy-flavored. */
    --bs-btn-color: #c9d1e8;
    --bs-btn-border-color: var(--mn-navy-lighter);
    --bs-btn-hover-bg: var(--mn-navy);
    --bs-btn-hover-border-color: var(--mn-navy-lighter);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--mn-navy-dark);
    --bs-btn-active-border-color: var(--mn-navy-dark);
    --bs-btn-active-color: #ffffff;
}

/* --- Gold Accent Button (new utility) --- */
.btn-accent {
    --bs-btn-bg: var(--mn-gold);
    --bs-btn-border-color: var(--mn-gold);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--mn-gold-dark);
    --bs-btn-hover-border-color: var(--mn-gold-dark);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--mn-gold-darkest);
    --bs-btn-active-border-color: var(--mn-gold-darkest);
    --bs-btn-active-color: #ffffff;
    --bs-btn-font-weight: 600;
    --bs-btn-disabled-bg: var(--mn-gray-400);
    --bs-btn-disabled-border-color: var(--mn-gray-400);
    --bs-btn-disabled-color: var(--mn-gray-600);
    display: inline-block;
    font-weight: var(--bs-btn-font-weight);
    color: var(--bs-btn-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--bs-border-width, 1px) solid var(--bs-btn-border-color);
    padding: var(--bs-btn-padding-y, 0.375rem) var(--bs-btn-padding-x, 0.75rem);
    font-size: var(--bs-btn-font-size, 1rem);
    line-height: var(--bs-btn-line-height, 1.5);
    border-radius: var(--bs-btn-border-radius, 0.375rem);
    background-color: var(--bs-btn-bg);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-accent:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}

.btn-accent:active,
.btn-accent.active {
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    color: var(--bs-btn-active-color);
}

.btn-accent:disabled,
.btn-accent.disabled {
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    opacity: 0.65;
}

.btn-accent.btn-sm {
    padding: var(--bs-btn-padding-y-sm, 0.25rem) var(--bs-btn-padding-x-sm, 0.5rem);
    font-size: var(--bs-btn-font-size-sm, 0.875rem);
    border-radius: var(--bs-btn-border-radius-sm, 0.25rem);
}

.btn-accent.btn-lg {
    padding: var(--bs-btn-padding-y-lg, 0.5rem) var(--bs-btn-padding-x-lg, 1rem);
    font-size: var(--bs-btn-font-size-lg, 1.25rem);
    border-radius: var(--bs-btn-border-radius-lg, 0.5rem);
}

/* --- Outline Accent Button --- */
.btn-outline-accent {
    --bs-btn-color: var(--mn-gold-dark);
    --bs-btn-border-color: var(--mn-gold);
    --bs-btn-hover-bg: var(--mn-gold);
    --bs-btn-hover-border-color: var(--mn-gold);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--mn-gold-dark);
    --bs-btn-active-border-color: var(--mn-gold-dark);
    --bs-btn-active-color: #ffffff;
    display: inline-block;
    font-weight: var(--bs-btn-font-weight, 400);
    color: var(--bs-btn-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: var(--bs-border-width, 1px) solid var(--bs-btn-border-color);
    padding: var(--bs-btn-padding-y, 0.375rem) var(--bs-btn-padding-x, 0.75rem);
    font-size: var(--bs-btn-font-size, 1rem);
    line-height: var(--bs-btn-line-height, 1.5);
    border-radius: var(--bs-btn-border-radius, 0.375rem);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-outline-accent:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}

.btn-outline-accent:active,
.btn-outline-accent.active {
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    color: var(--bs-btn-active-color);
}

.btn-outline-accent.btn-sm {
    padding: var(--bs-btn-padding-y-sm, 0.25rem) var(--bs-btn-padding-x-sm, 0.5rem);
    font-size: var(--bs-btn-font-size-sm, 0.875rem);
    border-radius: var(--bs-btn-border-radius-sm, 0.25rem);
}

.btn-outline-accent.btn-lg {
    padding: var(--bs-btn-padding-y-lg, 0.5rem) var(--bs-btn-padding-x-lg, 1rem);
    font-size: var(--bs-btn-font-size-lg, 1.25rem);
    border-radius: var(--bs-btn-border-radius-lg, 0.5rem);
}

/* --- Secondary Button override --- */
.btn-secondary {
    --bs-btn-bg: var(--mn-gray-600);
    --bs-btn-border-color: var(--mn-gray-600);
    --bs-btn-hover-bg: var(--mn-gray-700);
    --bs-btn-hover-border-color: var(--mn-gray-700);
}

.btn-outline-secondary {
    --bs-btn-color: var(--mn-gray-600);
    --bs-btn-border-color: var(--mn-gray-400);
    --bs-btn-hover-bg: var(--mn-gray-100);
    --bs-btn-hover-border-color: var(--mn-gray-500);
    --bs-btn-hover-color: var(--mn-gray-800);
}

/* --- Cards --- */
.card {
    --bs-card-bg: var(--mn-bg-surface);
    --bs-card-border-color: var(--mn-border-default);
    --bs-card-cap-bg: var(--mn-bg-surface-alt);
    --bs-card-cap-color: var(--mn-text-primary);
    border-radius: var(--mn-radius-lg);
    box-shadow: var(--mn-shadow-sm);
}

/* --- Backroom theme bg/text utility remaps ---
   Many components use Bootstrap's light-theme utilities (.bg-white, .text-primary, .text-dark, .bg-light)
   from before the dark-theme flip. Remap to Backroom tokens so existing markup stays readable
   without touching every component. Reader pages are untouched (they use their own scope). */
.bg-white {
    background-color: var(--mn-bg-surface) !important;
    color: var(--mn-text-primary);
}

/* .bg-light kept as literal light — Bootstrap combos like .bg-light.text-dark expect a light surface.
   Components that need a "subtle alt background" should use .bg-surface-alt (defined below) or
   the --mn-bg-surface-alt token directly. NEVER use .bg-light on its own — the page text colour
   will inherit the dark theme's light tone and become invisible against the also-light background. */
.bg-surface-alt {
    background-color: var(--mn-bg-surface-alt) !important;
    color: var(--mn-text-primary);
}

.text-primary {
    color: var(--mn-text-primary) !important;
}

.text-body {
    color: var(--mn-text-primary) !important;
}

/* .text-dark intentionally NOT remapped — Bootstrap combos like .bg-warning.text-dark
   (dark text on ember/gold) still need genuinely dark text for contrast. */

/* --- Badges --- */
.badge.bg-accent {
    background-color: var(--mn-gold) !important;
    color: #ffffff !important;
}

/* Bootstrap 5.3 badges on dark theme: ensure readable text on common bg utilities */
.badge.bg-secondary {
    color: var(--mn-text-primary) !important;
}

.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info {
    color: #ffffff !important;
}

.badge.bg-warning {
    color: var(--mn-text-inverse) !important;
}

/* --- Modals --- */
.modal-content {
    --bs-modal-bg: var(--mn-bg-surface);
    --bs-modal-border-color: var(--mn-border-default);
    --bs-modal-header-border-color: var(--mn-border-light);
    --bs-modal-footer-border-color: var(--mn-border-light);
    border-radius: var(--mn-radius-xl);
    box-shadow: var(--mn-shadow-xl);
}

/* --- Tables --- */
.table {
    --bs-table-bg: var(--mn-bg-surface);
    --bs-table-border-color: var(--mn-border-default);
    --bs-table-striped-bg: var(--mn-bg-surface-alt);
    --bs-table-hover-bg: var(--mn-bg-inset);
}

/* Bootstrap's contextual row/thead classes (.table-light, .table-active,
   .table-danger, .table-warning, .table-success, .table-info, .table-primary,
   .table-secondary) ship light-theme washes that read as bright pink/yellow/white
   on Midnette's dark palette. Re-point each to the dark-tint tokens so the
   semantics stay (selected row, failure row, warn row, thead band) but the
   colour fits the rest of the surface. */
.table > :not(caption) > * > *.table-light,
.table-light > th,
.table-light > td {
    --bs-table-bg-state: var(--mn-bg-surface-alt);
    --bs-table-color-state: var(--mn-text-primary);
}
.table > :not(caption) > * > *.table-active,
.table-active > th,
.table-active > td {
    --bs-table-bg-state: var(--mn-bg-elevated);
    --bs-table-color-state: var(--mn-text-primary);
}
.table > :not(caption) > * > *.table-primary,
.table-primary > th,
.table-primary > td {
    --bs-table-bg-state: var(--mn-navy);
    --bs-table-color-state: var(--mn-text-primary);
}
.table > :not(caption) > * > *.table-secondary,
.table-secondary > th,
.table-secondary > td {
    --bs-table-bg-state: var(--mn-bg-surface-alt);
    --bs-table-color-state: var(--mn-text-primary);
}
.table > :not(caption) > * > *.table-success,
.table-success > th,
.table-success > td {
    --bs-table-bg-state: var(--mn-success-light);
    --bs-table-color-state: var(--mn-text-primary);
}
.table > :not(caption) > * > *.table-info,
.table-info > th,
.table-info > td {
    --bs-table-bg-state: var(--mn-info-light);
    --bs-table-color-state: var(--mn-text-primary);
}
.table > :not(caption) > * > *.table-warning,
.table-warning > th,
.table-warning > td {
    --bs-table-bg-state: var(--mn-warning-light);
    --bs-table-color-state: var(--mn-text-primary);
}
.table > :not(caption) > * > *.table-danger,
.table-danger > th,
.table-danger > td {
    --bs-table-bg-state: var(--mn-danger-light);
    --bs-table-color-state: var(--mn-text-primary);
}

/* --- Forms --- */
.form-control,
.form-select {
    border-color: var(--mn-border-default);
    background-color: var(--mn-bg-surface);
    color: var(--mn-text-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mn-gold);
    box-shadow: 0 0 0 0.2rem rgba(217, 137, 71, 0.30);
}

/* --- Pagination --- */
.page-link {
    color: var(--mn-text-primary);
    background-color: var(--mn-bg-surface);
    border-color: var(--mn-border-default);
}

.page-link:hover {
    color: var(--mn-gold);
    background-color: var(--mn-bg-surface-alt);
    border-color: var(--mn-border-strong);
}

.page-item.active .page-link {
    background-color: var(--mn-navy);
    border-color: var(--mn-navy-lighter);
    color: var(--mn-text-primary);
}

.page-item.disabled .page-link {
    color: var(--mn-text-tertiary);
    background-color: var(--mn-bg-surface);
    border-color: var(--mn-border-default);
}

/* Code tags inherit color inside colored wrappers so they stay readable on fills */
.text-white code,
.bg-primary code,
.bg-success code,
.bg-danger code,
.bg-warning code,
.bg-info code {
    color: inherit;
}

/* --- Breadcrumbs --- */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--mn-gray-400);
    --bs-breadcrumb-item-active-color: var(--mn-text-secondary);
}

/* --- Alerts --- */
.alert-primary {
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
    --bs-alert-color: var(--bs-primary-text-emphasis);
}


/* =============================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================= */

.font-accent {
    font-family: var(--mn-font-accent);
}

.font-body {
    font-family: var(--mn-font-body);
}

.font-system {
    font-family: var(--mn-font-system);
}

/* Heading defaults: Merriweather Bold, paper color.
   --bs-heading-color resolves to --mn-text-primary (#f0e8d8) for the dark theme.
   Do NOT override headings to var(--mn-navy) — navy is invisible on the dark page background.
   See StyleGuide.razor AI-INSTRUCTION rule #5. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--mn-font-body);
    font-weight: var(--mn-font-bold);
    color: var(--bs-heading-color);
}

/* Let explicit color utilities override heading color */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3,
.text-white .h4, .text-white .h5, .text-white .h6 {
    color: inherit;
}

/* Reader layout owns its own theme — headings must inherit reader text color */
.reader-layout h1, .reader-layout h2, .reader-layout h3,
.reader-layout h4, .reader-layout h5, .reader-layout h6,
.reader-layout .h1, .reader-layout .h2, .reader-layout .h3,
.reader-layout .h4, .reader-layout .h5, .reader-layout .h6 {
    color: inherit;
    font-family: inherit;
}

/* Brand moment headings use Pirata One */
.heading-brand {
    font-family: var(--mn-font-accent);
    font-weight: 400;
    letter-spacing: 0.02em;
}