/* =============================================
   MIDNETTE DESIGN TOKENS
   Brand: Midnette
   Primary: Navy #02184b
   Accent: Gold #b5984a
   Theme: Light-dominant, warm off-white

   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;

    --mn-gold:            #b5984a;
    --mn-gold-light:      #d4ba72;
    --mn-gold-lighter:    #e8d9a8;
    --mn-gold-dark:       #8f7735;
    --mn-gold-darkest:    #6b5928;
    --mn-gold-rgb:        181, 152, 74;

    /* --- Semantic Colors --- */
    --mn-success:         #2d7a4f;
    --mn-success-light:   #d4edda;
    --mn-success-dark:    #1e5435;
    --mn-success-rgb:     45, 122, 79;

    --mn-warning:         #c08b2d;
    --mn-warning-light:   #fff3cd;
    --mn-warning-dark:    #8a6420;
    --mn-warning-rgb:     192, 139, 45;

    --mn-danger:          #a93226;
    --mn-danger-light:    #f8d7da;
    --mn-danger-dark:     #7a241b;
    --mn-danger-rgb:      169, 50, 38;

    --mn-info:            #1a6b8a;
    --mn-info-light:      #d1ecf1;
    --mn-info-dark:       #124a60;
    --mn-info-rgb:        26, 107, 138;

    /* --- Warm Neutral Scale (tinted toward gold/cream) --- */
    --mn-gray-50:         #faf8f5;
    --mn-gray-100:        #f5f2ed;
    --mn-gray-200:        #e8e4dd;
    --mn-gray-300:        #d5d0c7;
    --mn-gray-400:        #b8b2a6;
    --mn-gray-500:        #918a7e;
    --mn-gray-600:        #6d665c;
    --mn-gray-700:        #4f4940;
    --mn-gray-800:        #352f28;
    --mn-gray-900:        #1f1b16;

    /* --- Surface Colors --- */
    --mn-bg-body:         #faf8f5;
    --mn-bg-surface:      #ffffff;
    --mn-bg-surface-alt:  #f5f2ed;
    --mn-bg-elevated:     #ffffff;
    --mn-bg-inset:        #f0ece5;
    --mn-bg-overlay:      rgba(2, 24, 75, 0.6);

    /* --- Border Colors --- */
    --mn-border-default:  #e8e4dd;
    --mn-border-light:    #f0ece5;
    --mn-border-strong:   #d5d0c7;
    --mn-border-focus:    #b5984a;

    /* --- Text Colors --- */
    --mn-text-primary:    #1f1b16;
    --mn-text-secondary:  #6d665c;
    --mn-text-tertiary:   #918a7e;
    --mn-text-inverse:    #faf8f5;
    --mn-text-link:       #0a2d6e;
    --mn-text-link-hover: #02184b;

    /* --- Bootstrap 5 Variable Overrides --- */
    --bs-primary:         #02184b;
    --bs-primary-rgb:     2, 24, 75;
    --bs-secondary:       #6d665c;
    --bs-secondary-rgb:   109, 102, 92;
    --bs-success:         #2d7a4f;
    --bs-success-rgb:     45, 122, 79;
    --bs-info:            #1a6b8a;
    --bs-info-rgb:        26, 107, 138;
    --bs-warning:         #c08b2d;
    --bs-warning-rgb:     192, 139, 45;
    --bs-danger:          #a93226;
    --bs-danger-rgb:      169, 50, 38;
    --bs-light:           #faf8f5;
    --bs-light-rgb:       250, 248, 245;
    --bs-dark:            #1f1b16;
    --bs-dark-rgb:        31, 27, 22;

    --bs-body-color:      #1f1b16;
    --bs-body-color-rgb:  31, 27, 22;
    --bs-body-bg:         #faf8f5;
    --bs-body-bg-rgb:     250, 248, 245;

    --bs-emphasis-color:      #1f1b16;
    --bs-secondary-color:     rgba(109, 102, 92, 0.85);
    --bs-tertiary-color:      rgba(109, 102, 92, 0.5);
    --bs-secondary-bg:        #e8e4dd;
    --bs-tertiary-bg:         #f5f2ed;

    --bs-heading-color:       #02184b;

    --bs-link-color:          #0a2d6e;
    --bs-link-color-rgb:      10, 45, 110;
    --bs-link-hover-color:    #02184b;
    --bs-link-hover-color-rgb: 2, 24, 75;

    --bs-border-color:        #e8e4dd;
    --bs-border-color-translucent: rgba(31, 27, 22, 0.12);

    --bs-code-color:          #a93226;

    /* Subtle bg overrides for alerts/badges */
    --bs-primary-text-emphasis:   #010f30;
    --bs-primary-bg-subtle:       #cdd5e5;
    --bs-primary-border-subtle:   #9baecb;
    --bs-success-text-emphasis:   #1e5435;
    --bs-success-bg-subtle:       #d4edda;
    --bs-success-border-subtle:   #a3cfbb;
    --bs-warning-text-emphasis:   #664d03;
    --bs-warning-bg-subtle:       #fff3cd;
    --bs-warning-border-subtle:   #ffe69c;
    --bs-danger-text-emphasis:    #7a241b;
    --bs-danger-bg-subtle:        #f8d7da;
    --bs-danger-border-subtle:    #f1aeb5;
    --bs-info-text-emphasis:      #124a60;
    --bs-info-bg-subtle:          #d1ecf1;
    --bs-info-border-subtle:      #9eeaf9;

    /* Focus ring */
    --bs-focus-ring-color: rgba(181, 152, 74, 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 --- */
    --mn-shadow-xs:    0 1px 2px rgba(31, 27, 22, 0.05);
    --mn-shadow-sm:    0 1px 3px rgba(31, 27, 22, 0.08), 0 1px 2px rgba(31, 27, 22, 0.06);
    --mn-shadow-md:    0 4px 6px rgba(31, 27, 22, 0.07), 0 2px 4px rgba(31, 27, 22, 0.06);
    --mn-shadow-lg:    0 10px 15px rgba(31, 27, 22, 0.08), 0 4px 6px rgba(31, 27, 22, 0.05);
    --mn-shadow-xl:    0 20px 25px rgba(31, 27, 22, 0.10), 0 8px 10px rgba(31, 27, 22, 0.04);
    --mn-shadow-2xl:   0 25px 50px rgba(31, 27, 22, 0.15);
    --mn-shadow-inner: inset 0 2px 4px rgba(31, 27, 22, 0.06);
    --mn-shadow-gold:  0 4px 14px rgba(181, 152, 74, 0.25);
    --mn-shadow-navy:  0 4px 14px rgba(2, 24, 75, 0.20);

    /* --- 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 --- */
    --mn-chart-navy:        #02184b;
    --mn-chart-gold:        #b5984a;
    --mn-chart-success:     #2d7a4f;
    --mn-chart-info:        #1a6b8a;
    --mn-chart-warning:     #c08b2d;
    --mn-chart-danger:      #a93226;
    --mn-chart-gray:        #918a7e;
    --mn-chart-navy-alpha:  rgba(2, 24, 75, 0.12);
    --mn-chart-gold-alpha:  rgba(181, 152, 74, 0.12);
    --mn-chart-grid:        rgba(31, 27, 22, 0.08);
    --mn-chart-font:        'Merriweather', Georgia, serif;

    /* --- Header / Nav Tokens (for future topnav build) --- */
    --mn-header-height:         72px;
    --mn-header-height-compact: 56px;
    --mn-header-bg:             #02184b;
    --mn-header-text:           #faf8f5;
    --mn-header-accent:         #b5984a;
}


/* =============================================
   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 {
    --bs-btn-color: var(--mn-navy);
    --bs-btn-border-color: var(--mn-navy);
    --bs-btn-hover-bg: var(--mn-navy);
    --bs-btn-hover-border-color: var(--mn-navy);
    --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);
}

/* --- Badges --- */
.badge.bg-accent {
    background-color: var(--mn-gold) !important;
    color: #ffffff !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);
}

/* --- 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(181, 152, 74, 0.25);
}

/* --- Pagination --- */
.page-link {
    color: var(--mn-navy);
    border-color: var(--mn-border-default);
}

.page-link:hover {
    color: var(--mn-navy-dark);
    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);
}

/* --- 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(--mn-navy-dark);
}


/* =============================================
   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, navy color */
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;
}