/**
 * redline — colors.css
 * Source: MOCKUP/assets/css/tokens.css (verbatim) + MOCKUP/assets/css/redline.css
 * (Bootstrap 5.3 --bs-* variable mapping + brand token layer). Light block first,
 * then a [data-bs-theme=dark] block at the end of this file — see its own header.
 */

/**
 * redline — design tokens (Red Line Superstore).
 * Same token NAMES as E:/WEBSITES/LIBRARY/tokens/template-tokens.css — values only.
 *
 * LIGHT-FIRST, with a dark theme appended at the end of this file. Palette is lifted from the live
 * redline6 site (newline7 template: #C0122D red, #282828 charcoal, #3D598A navy,
 * #F4F4F4 / #F7F7F8 greys) and re-measured — see RESEARCH/design-tokens.md.
 *
 *   #C0122D red       primary — 6.24:1 on white (AA text + fill)
 *   #9D0B17 red dark  hover / pressed — 8.42:1
 *   #282828 charcoal  headings, dark bands — 14.74:1
 *   #3D598A navy      secondary — "Custom" kits, info — 7.01:1
 *   #5C6670 steel     secondary text — 5.85:1
 *   #F4F4F5 fog       alt sections
 *
 * Banned anywhere: #000000, #6366f1, #800000.
 */

:root {
    --template-primary: #C0122D;
    --template-primary-hover: #9D0B17;
    --template-primary-active: #7F0A14;
    --template-primary-subtle: #FDECEE;
    --template-primary-subtle-hover: #FAD9DD;
    --template-primary-border-subtle: #F2B8C0;
    --template-primary-text-emphasis: #9D0B17;
    --template-on-primary: #FFFFFF;

    --template-secondary: #3D598A;
    --template-secondary-hover: #2E4570;
    --template-accent: #282828;
    --template-accent-hover: #141416;
    --template-bg: #FFFFFF;
    --template-bg-alt: #F4F4F5;
    --template-text: #282828;
    --template-text-body: #3A3D42;
    --template-text-secondary: #5C6670;
    --template-border: #E2E4E8;
}

/* ============================================================
   RED LINE SUPERSTORE — Color Theme: REDLINE
   Maps Bootstrap 5.3 --bs-* variables and the brand token layer
   onto the redline palette. Swap this file to re-theme the site.
   The dark counterpart lives at the end of this file and must stay after this block.
   Every pair below is contrast-measured (RESEARCH/design-tokens.md).
   ============================================================ */

:root, [data-bs-theme=light] {
    --bs-primary: #C0122D;
    --bs-primary-rgb: 192, 18, 45;
    --bs-primary-text-emphasis: #9D0B17;
    --bs-primary-bg-subtle: #FDECEE;
    --bs-primary-border-subtle: #F2B8C0;

    --bs-secondary: #3D598A;
    --bs-secondary-rgb: 61, 89, 138;
    --bs-secondary-text-emphasis: #2E4570;
    --bs-secondary-bg-subtle: #E9EEF6;
    --bs-secondary-border-subtle: #C3CFE3;

    --bs-dark: #282828;
    --bs-dark-rgb: 40, 40, 40;
    --bs-light: #F4F4F5;
    --bs-light-rgb: 244, 244, 245;

    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 1rem;
    --bs-body-color: #3A3D42;
    --bs-body-color-rgb: 58, 61, 66;
    --bs-body-bg: #FFFFFF;
    --bs-emphasis-color: #282828;
    --bs-secondary-color: #5C6670;
    --bs-secondary-bg: #F4F4F5;
    --bs-tertiary-bg: #F9F9FA;
    --bs-heading-color: #282828;
    --bs-border-color: #E2E4E8;
    --bs-border-color-translucent: rgba(40, 40, 40, .12);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: var(--radius-sm);
    --bs-border-radius-xl: var(--radius-sm);

    --bs-link-color: #C0122D;
    --bs-link-color-rgb: 192, 18, 45;
    --bs-link-hover-color: #9D0B17;
    --bs-link-hover-color-rgb: 157, 11, 23;
    --bs-focus-ring-color: rgba(192, 18, 45, .4);

    --bs-success: #1E7A46;
    --bs-success-rgb: 30, 122, 70;
    --bs-success-text-emphasis: #155C34;
    --bs-success-bg-subtle: #E6F4EC;
    --bs-warning: #9A5B00;
    --bs-warning-rgb: 154, 91, 0;
    --bs-danger: #C0122D;
    --bs-danger-rgb: 192, 18, 45;
    --bs-info: #3D598A;
    --bs-info-rgb: 61, 89, 138;
}

/* ============================================================
   BRAND DESIGN TOKENS
   ============================================================ */
:root {
    --brand-primary:         var(--template-primary);
    --brand-primary-hover:   var(--template-primary-hover);
    --brand-primary-active:  var(--template-primary-active);
    --brand-primary-subtle:  var(--template-primary-subtle);
    --brand-primary-on-dark: #FF6B7D;   /* 6.14:1 on #1C1D20 — red TEXT on dark bands */
    /* --brand-primary does double duty: red TEXT on the page ground, and the red FILL
       behind white label text. On white those two wants coincide, so one token was
       enough. On ink they diverge -- text needs a LIGHTER red to clear 4.5:1, a fill
       needs a DARKER one to keep its white label readable. --brand-primary stays the
       text role; every `background: var(--brand-primary)` uses this instead. */
    --brand-primary-fill:       var(--template-primary);
    --brand-primary-fill-hover: var(--template-primary-hover);
    /* Same split for the navy: --brand-secondary is the TEXT role, this is the FILL. */
    --brand-secondary-fill:     var(--template-secondary);
    --brand-secondary:       var(--template-secondary);   /* navy */
    --brand-secondary-hover: var(--template-secondary-hover);
    --brand-secondary-subtle:#E9EEF6;
    --brand-secondary-border:#C3D4EA;   /* alert-primary-style edge for -subtle bands */
    --brand-secondary-on-dark:#8FA9D4;  /* 6.18:1 on --brand-ink-2 — navy on dark bands */
    --brand-charcoal:        #282828;
    --brand-orange:          #ffa200;   /* .badge-gold fill — charcoal label 7.61:1 */
    --brand-ink:             #1C1D20;   /* dark bands + footer */
    --brand-ink-2:           #26282C;

    --brand-bg:              var(--template-bg);
    --brand-bg-alt:          var(--template-bg-alt);
    --brand-bg-soft:         #F9F9FA;

    --brand-text:            var(--template-text);
    --brand-text-body:       var(--template-text-body);
    --brand-text-secondary:  var(--template-text-secondary);
    --brand-text-on-primary: var(--template-on-primary);
    --brand-text-on-dark:    #FFFFFF;
    --brand-text-on-dark-2:  #B9BEC5;   /* 9.02:1 on ink */
    --brand-text-on-dark-soft: #E4E6EA;  /* 12.4:1 on ink — hero sub, leads */
    --brand-text-on-primary-soft: #FDE7EA;   /* 5.0:1 on primary — CTA band body */
    --brand-bg-rgb:          255, 255, 255;

    --brand-border:          var(--template-border);   /* decorative only — 1.27:1 */
    --brand-border-on-dark:  #5A5E66;                  /* inputs on ink bands */
    --brand-border-strong:   #8A9099;                  /* 3.22:1 — UI component edges */
    --brand-border-dark:     #3A3D42;

    --color-success:  #1E7A46;
    --color-warning:  #9A5B00;
    --color-danger:   #C0122D;
    --color-star:     #B45309;   /* 5.02:1 — stars always ship with a numeric rating */
    --color-success-on-dark:  #7BD89F;   /* 8.9:1 on ink — footer "open now" */

    /* Status / state pairs — background + text, always used together.
       -border tokens clear 3:1 (WCAG 1.4.11) against BOTH white and their
       own -subtle fill — a step darker than the naive "lightest vs white"
       value, which fails against the fill. See colors.css contrast table
       in the redline joomla-alert theming pass. */
    --color-success-subtle:   #E6F4EC; --color-success-emphasis:   #155C34; --color-success-border: #50986F;
    --color-warning-subtle:   #FFF3DC; --color-warning-emphasis:   #7A4800; --color-warning-border: #B5843B;
    --color-danger-subtle:    #FDE8EA; --color-danger-emphasis:    #8A1024; --color-danger-border: #D76375;
    --color-info-border:      #7489AD;   /* NEW — scoped to joomla-alert info; does NOT re-tint --brand-secondary-border */
    --color-neutral-subtle:   #EEF0F3; --color-neutral-emphasis:   #3A4250;
    --brand-secondary-emphasis: var(--template-secondary-hover);

    /* Product colour swatches — the physical kit finishes, not UI colour. */
    --swatch-yellow: #F6D32D;
    --swatch-white:  var(--brand-bg);
    --swatch-silver: linear-gradient(135deg, #D7DADF, #9AA0A8);
    --swatch-red:    var(--brand-primary);
    --swatch-purple: #6A2C91;
    --swatch-pink:   #E8579B;
    --swatch-orange: #F07F13;
    --swatch-green:  #2E8B3E;
    --swatch-blue:   #1F4FA8;
    --swatch-black:  var(--brand-ink);
    --swatch-aqua:   #1FB5C9;

    --brand-primary-rgb:   192, 18, 45;
    --brand-secondary-rgb: 61, 89, 138;
    --brand-ink-rgb:       28, 29, 32;

    /* Typography — Saira Condensed carries the logo's motorsport voice
       (display + headings, real 600/700/800 cuts). Roboto is the live
       site's body face, kept for continuity. */
    --font-display: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-heading: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-body:    'Roboto', 'Helvetica Neue', Arial, sans-serif;

    --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem;
    --text-xl:clamp(1.25rem,1.2vw + .9rem,1.5rem);
    --text-2xl:clamp(1.5rem,1.8vw + .9rem,2rem);
    --text-3xl:clamp(1.875rem,2.6vw + 1rem,2.75rem);
    --text-4xl:clamp(2.25rem,3.6vw + 1rem,3.75rem);
    --text-5xl:clamp(2.75rem,5.4vw + 1rem,5.5rem);

    --tracking-tight:-0.01em; --tracking-wide:.04em; --tracking-widest:.16em;

    --section-py:clamp(3rem,6vw,5.5rem);
    --section-py-sm:clamp(2rem,4vw,3.5rem);
    --section-py-xs:clamp(1rem,2vw,1.75rem);

    --radius-sm:3px; --radius-md:var(--radius-sm); --radius-lg:var(--radius-sm);
    --skew: -12deg;

    --shadow-sm:0 1px 2px rgba(20,20,22,.06),0 1px 3px rgba(20,20,22,.08);
    --shadow-md:0 6px 18px rgba(20,20,22,.10),0 2px 6px rgba(20,20,22,.06);
    --shadow-lg:0 18px 40px rgba(20,20,22,.14),0 6px 12px rgba(20,20,22,.08);
    --focus-ring:0 0 0 3px #FFFFFF, 0 0 0 5px #C0122D;

    --transition-fast:150ms ease; --transition-base:250ms ease; --transition-slow:450ms ease;

    --bg-gray: #f5f5f5;
}

/* ============================================================
   BOOTSTRAP COMPONENT SKINS (variables only — markup stays Bootstrap)
   ============================================================ */
.btn {
    --bs-btn-font-family: var(--font-heading);
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-border-width: 2px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-padding-y: .9rem; --bs-btn-font-size: 1.125rem; }
.btn-sm { --bs-btn-padding-x: .85rem; --bs-btn-padding-y: .4rem; }

.btn-primary {
    --bs-btn-bg: #C0122D; --bs-btn-border-color: #C0122D; --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #9D0B17; --bs-btn-hover-border-color: #9D0B17; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #7F0A14; --bs-btn-active-border-color: #7F0A14;
    --bs-btn-disabled-bg: #C0122D; --bs-btn-disabled-border-color: #C0122D;
    --bs-btn-focus-shadow-rgb: 192, 18, 45;
}
.btn-secondary {
    --bs-btn-bg: #3D598A; --bs-btn-border-color: #3D598A; --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #2E4570; --bs-btn-hover-border-color: #2E4570; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #243759; --bs-btn-active-border-color: #243759;
    --bs-btn-focus-shadow-rgb: 61, 89, 138;
}
.btn-dark {
    --bs-btn-bg: #282828; --bs-btn-border-color: #282828;
    --bs-btn-hover-bg: #C0122D; --bs-btn-hover-border-color: #C0122D;
    --bs-btn-active-bg: #9D0B17; --bs-btn-active-border-color: #9D0B17;
}
.btn-outline-primary {
    --bs-btn-color: #C0122D; --bs-btn-border-color: #C0122D;
    --bs-btn-hover-bg: #C0122D; --bs-btn-hover-border-color: #C0122D; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #9D0B17; --bs-btn-active-border-color: #9D0B17;
    --bs-btn-focus-shadow-rgb: 192, 18, 45;
}
.btn-outline-dark {
    --bs-btn-color: #282828; --bs-btn-border-color: #282828;
    --bs-btn-hover-bg: #282828; --bs-btn-hover-border-color: #282828;
}
.btn-outline-light {
    --bs-btn-color: #FFFFFF; --bs-btn-border-color: rgba(255,255,255,.85);
    --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-color: #282828;
}
.btn-link { text-transform: none; letter-spacing: normal; font-family: var(--font-body); font-weight: 500; }

.form-control, .form-select {
    --bs-border-color: #8A9099;
    border-radius: var(--radius-sm);
    padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #C0122D;
    box-shadow: 0 0 0 .2rem rgba(192, 18, 45, .25);
}
.form-check-input { border-color: #8A9099; }
.form-check-input:checked { background-color: #C0122D; border-color: #C0122D; }
.form-label { font-weight: 500; color: var(--brand-text); }

.badge { font-family: var(--font-heading); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-sm); }

.card { --bs-card-border-color: var(--brand-border); --bs-card-border-radius: var(--radius-sm); --bs-card-inner-border-radius: var(--radius-sm); }

.nav-tabs { --bs-nav-tabs-link-active-color: #282828; --bs-nav-tabs-link-active-border-color: #E2E4E8 #E2E4E8 #FFFFFF; }
.nav-pills { --bs-nav-pills-link-active-bg: #C0122D; }
.nav-link { color: var(--brand-text); }
.nav-link:hover, .nav-link:focus { color: #C0122D; }

.pagination {
    --bs-pagination-color: #282828;
    --bs-pagination-hover-color: #C0122D;
    --bs-pagination-focus-color: #C0122D;
    --bs-pagination-active-bg: #C0122D;
    --bs-pagination-active-border-color: #C0122D;
    --bs-pagination-border-color: #E2E4E8;
    font-family: var(--font-heading);
    font-weight: 600;
}

.accordion {
    --bs-accordion-active-color: #282828;
    --bs-accordion-active-bg: #FDECEE;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(192, 18, 45, .25);
    --bs-accordion-border-color: #E2E4E8;
}

.breadcrumb { --bs-breadcrumb-divider-color: #8A9099; --bs-breadcrumb-item-active-color: #282828; font-size: var(--text-sm); }

.list-group { --bs-list-group-active-bg: #C0122D; --bs-list-group-active-border-color: #C0122D; }

.dropdown-menu { --bs-dropdown-link-active-bg: #C0122D; --bs-dropdown-border-color: #E2E4E8; --bs-dropdown-border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.progress { --bs-progress-bar-bg: #C0122D; }

.table { --bs-table-color: var(--brand-text-body); }

.text-bg-primary { background-color: #C0122D !important; color: #FFFFFF !important; }
.text-bg-secondary { background-color: #3D598A !important; color: #FFFFFF !important; }
.text-bg-dark { background-color: #282828 !important; color: #FFFFFF !important; }
.bg-dark { background-color: var(--brand-ink) !important; }
.link-primary { color: #C0122D !important; }
/* Bootstrap 5.3 declares .text-muted with --bs-text-opacity + !important
   (media/vendor/bootstrap/css/bootstrap.css); a plain override loses to it
   regardless of source order, so !important is required here too. */
.text-muted { color: var(--brand-text-secondary) !important; }

.bg-gray {background-color:var(--bg-gray)!important;}
/* ============================================================
   <joomla-alert> WEB COMPONENT — Red Line palette
   The vendor sheet (media/vendor/joomla-custom-elements/css/joomla-alert.css)
   declares its --jui-alert-* custom properties ON THE ELEMENT ITSELF, not
   :root, so a :root override never reaches them. That vendor sheet also
   loads AFTER this file on every page (it's queued unconditionally by
   layouts/joomla/system/message.php), so a bare `joomla-alert { }` rule
   here ties the vendor rule's specificity (0,0,1) and loses on load
   order. `html joomla-alert` is (0,0,2) and wins regardless of order.
   Do NOT edit the vendor file — it is core Joomla, not ours to change.
   ============================================================ */
html joomla-alert {
    --jui-alert-margin: 0;
    --jui-alert-border-radius: var(--radius-sm);

    --jui-alert-success-color: var(--color-success-emphasis);
    --jui-alert-success-background-color: var(--color-success-subtle);
    --jui-alert-success-border-color: var(--color-success-border);
    --jui-alert-success-link-color: var(--color-success-emphasis);

    --jui-alert-info-color: var(--brand-secondary-emphasis);
    --jui-alert-info-background-color: var(--brand-secondary-subtle);
    --jui-alert-info-border-color: var(--color-info-border);
    --jui-alert-info-link-color: var(--brand-secondary-emphasis);

    --jui-alert-warning-color: var(--color-warning-emphasis);
    --jui-alert-warning-background-color: var(--color-warning-subtle);
    --jui-alert-warning-border-color: var(--color-warning-border);
    --jui-alert-warning-link-color: var(--color-warning-emphasis);

    --jui-alert-danger-color: var(--color-danger-emphasis);
    --jui-alert-danger-background-color: var(--color-danger-subtle);
    --jui-alert-danger-border-color: var(--color-danger-border);
    --jui-alert-danger-link-color: var(--color-danger-emphasis);
}

/* core renders #system-message-container unconditionally on every page,
   empty or not; messages.js appends one <joomla-alert> per message type
   with --jui-alert-margin: 0 above, so nothing else supplies the gap
   between stacked alerts. flex + gap restores it without per-alert margin. */
#system-message-container {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ============================================================
   DARK THEME
   The template style ships default_theme=dark, so this is the palette most
   visitors actually get. Bootstrap sets data-bs-theme on <body> (see
   index.php), and the light block above is `:root, [data-bs-theme=light]` --
   the bare `:root` half matches <html> unconditionally, so a dark block MUST
   come after it in source order to win the equal-specificity tie. Do not
   reorder this file.

   Ratios below are against the two dark grounds: ink #1C1D20 and ink-2 #26282C.
   The brand red #C0122D is only 2.49:1 on ink, so it is NEVER text here --
   --brand-primary carries #FF6B7D (6.14:1) for text and links, and the solid
   button FILLS are re-pinned separately at the bottom of this block, where a
   red that clears 1.4.11's 3:1 boundary rule is used instead.
   ============================================================ */
[data-bs-theme=dark] {
    /* --- primitives --- */
    --template-primary: #FF6B7D;            /* TEXT/link red; fills re-pinned below */
    --template-primary-hover: #FF8F9C;
    --template-primary-active: #FFB3BC;
    --template-primary-subtle: #3A1F24;
    --template-primary-subtle-hover: #4A272D;
    --template-primary-border-subtle: #6E2E37;
    --template-primary-text-emphasis: #FF8F9C;
    --template-on-primary: #FFFFFF;

    --template-secondary: #8FA9D4;          /* 6.18:1 on ink-2 */
    --template-secondary-hover: #AFC2E2;
    --template-accent: #E4E6EA;
    --template-accent-hover: #FFFFFF;
    --template-bg: #1C1D20;
    --template-bg-alt: #26282C;
    --template-text: #FFFFFF;               /* 17.4:1 on ink */
    --template-text-body: #E4E6EA;          /* 12.4:1 on ink */
    --template-text-secondary: #B9BEC5;     /* 9.02:1 on ink */
    --template-border: #3A3D42;

    /* --- brand layer ---
       The derived tokens below (--brand-bg: var(--template-bg) etc.) are DECLARED on
       :root, so their var() substitution happens at <html>, where the light primitives
       still apply. Overriding only the primitives on <body> therefore changes nothing.
       Every derived token has to be restated here. This is the single most load-bearing
       comment in the file: drop one of these lines and that surface silently stays light. */
    --brand-primary: #FF6B7D;               /* TEXT role: 6.14:1 on ink */
    --brand-primary-fill: #D6203C;          /* FILL role: white label 5.08:1, boundary 3.21:1 */
    --brand-primary-fill-hover: #E63E58;    /* hover FILL: white label 4.48:1 */
    --brand-secondary-fill: #3D598A;        /* FILL role: keeps the light navy, white label 7.01:1 */
    --brand-primary-hover: #FF8F9C;
    --brand-primary-active: #FFB3BC;
    --brand-primary-subtle: #3A1F24;
    --brand-secondary: #8FA9D4;
    --brand-secondary-hover: #AFC2E2;
    --brand-bg: #1C1D20;
    --brand-bg-alt: #26282C;
    --brand-text: #FFFFFF;
    --brand-text-body: #E4E6EA;
    --brand-text-secondary: #B9BEC5;
    --brand-text-on-primary: #FFFFFF;
    --brand-border: #3A3D42;

    /* --- brand layer that is not derived from a primitive --- */
    --brand-bg-soft: #26282C;
    --brand-bg-rgb: 28, 29, 32;
    /* NOT inverted on purpose. Every consumer (.badge-years, .badge-premade, .skip-link,
       .about-make-media, .type-photo, .page-message .step-num) uses this as a DARK chip or
       photo backdrop paired with --brand-text-on-dark. Flipping it to a light value turns
       every one of those into white-on-near-white. It is nudged one step lighter than the
       light-mode #282828 so a chip still separates from the ink page behind it. */
    --brand-charcoal: #3A3D42;
    --brand-secondary-subtle: #202A3C;
    --brand-secondary-border: #4A5E80;
    --brand-primary-rgb: 255, 107, 125;
    --brand-secondary-rgb: 143, 169, 212;
    --bg-gray: #26282C;

    /* Physical kit finishes, not UI colour -- a white wrap stays white and a
       black wrap stays black no matter which theme the page is in. */
    --swatch-white: #FFFFFF;
    --swatch-red:   #C0122D;
    --swatch-black: #1C1D20;

    /* --- status colours, re-picked for an ink ground --- */
    --color-success: #7BD89F;               /* 8.9:1 on ink */
    --color-warning: #E8B45C;               /* 8.6:1 on ink */
    --color-danger:  #FF6B7D;
    --color-star:    #E0A33C;               /* 7.4:1 on ink */
    --color-success-subtle: #16301F; --color-success-emphasis: #7BD89F; --color-success-border: #50986F;
    --color-warning-subtle: #332613; --color-warning-emphasis: #E8B45C; --color-warning-border: #B5843B;
    --color-danger-subtle:  #331A1E; --color-danger-emphasis:  #FF6B7D; --color-danger-border:  #D76375;
    --color-info-border: #7489AD;
    --color-neutral-subtle: #2A2D33; --color-neutral-emphasis: #C7CDD6;
    --brand-secondary-emphasis: #AFC2E2;

    /* --- Bootstrap --- */
    --bs-body-bg: #1C1D20;
    --bs-body-color: #E4E6EA;
    --bs-body-color-rgb: 228, 230, 234;
    --bs-emphasis-color: #FFFFFF;
    --bs-heading-color: #FFFFFF;
    --bs-secondary-color: #B9BEC5;
    --bs-secondary-bg: #26282C;
    --bs-tertiary-bg: #2E3035;
    --bs-border-color: #3A3D42;
    --bs-border-color-translucent: rgba(255, 255, 255, .14);

    --bs-primary: #FF6B7D;
    --bs-primary-rgb: 255, 107, 125;
    --bs-primary-text-emphasis: #FF8F9C;
    --bs-primary-bg-subtle: #3A1F24;
    --bs-primary-border-subtle: #6E2E37;

    --bs-secondary: #8FA9D4;
    --bs-secondary-rgb: 143, 169, 212;
    --bs-secondary-text-emphasis: #AFC2E2;
    --bs-secondary-bg-subtle: #202A3C;
    --bs-secondary-border-subtle: #4A5E80;

    --bs-dark: #E4E6EA;
    --bs-dark-rgb: 228, 230, 234;
    --bs-light: #26282C;
    --bs-light-rgb: 38, 40, 44;

    --bs-link-color: #FF6B7D;
    --bs-link-color-rgb: 255, 107, 125;
    --bs-link-hover-color: #FF8F9C;
    --bs-link-hover-color-rgb: 255, 143, 156;
    --bs-focus-ring-color: rgba(255, 107, 125, .45);

    --bs-success: #7BD89F; --bs-success-rgb: 123, 216, 159;
    --bs-success-text-emphasis: #7BD89F; --bs-success-bg-subtle: #16301F;
    --bs-warning: #E8B45C; --bs-warning-rgb: 232, 180, 92;
    --bs-danger:  #FF6B7D; --bs-danger-rgb:  255, 107, 125;
    --bs-info:    #8FA9D4; --bs-info-rgb:    143, 169, 212;

    /* Drop shadows read as a light haze on a light page and as nothing at all on
       an ink one -- deepened so elevation still separates a card from the ground. */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.40);
    --shadow-md: 0 6px 18px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40);
    --shadow-lg: 0 18px 40px rgba(0,0,0,.60), 0 6px 12px rgba(0,0,0,.45);
    --focus-ring: 0 0 0 3px #1C1D20, 0 0 0 5px #FF6B7D;
}

/* Solid button fills. These are hardcoded hex in the light skins above, so they
   need real twins rather than a token swap.
   #D6203C is the dark-mode primary fill: 3.21:1 against ink (clears 1.4.11 for the
   control's own boundary, which #C0122D at 2.49:1 does not) while still carrying
   white label text at 5.08:1. */
[data-bs-theme=dark] .btn-primary {
    --bs-btn-bg: #D6203C; --bs-btn-border-color: #D6203C; --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #E63E58; --bs-btn-hover-border-color: #E63E58; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #B81830; --bs-btn-active-border-color: #B81830;
    --bs-btn-disabled-bg: #D6203C; --bs-btn-disabled-border-color: #D6203C;
    --bs-btn-focus-shadow-rgb: 255, 107, 125;
}
[data-bs-theme=dark] .btn-secondary {
    --bs-btn-bg: #4A6BA5; --bs-btn-border-color: #4A6BA5; --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #5C7FBD; --bs-btn-hover-border-color: #5C7FBD; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #3D598A; --bs-btn-active-border-color: #3D598A;
    --bs-btn-focus-shadow-rgb: 143, 169, 212;
}
/* .btn-dark is an ink fill on a light page. On an ink page that is invisible, so it
   inverts to a light chip with ink text -- the same move the checkout already makes. */
[data-bs-theme=dark] .btn-dark {
    --bs-btn-bg: #E4E6EA; --bs-btn-border-color: #E4E6EA; --bs-btn-color: #1C1D20;
    --bs-btn-hover-bg: #D6203C; --bs-btn-hover-border-color: #D6203C; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #B81830; --bs-btn-active-border-color: #B81830; --bs-btn-active-color: #FFFFFF;
}
[data-bs-theme=dark] .btn-outline-dark {
    --bs-btn-color: #E4E6EA; --bs-btn-border-color: #8A9099;
    --bs-btn-hover-bg: #E4E6EA; --bs-btn-hover-border-color: #E4E6EA; --bs-btn-hover-color: #1C1D20;
    --bs-btn-active-bg: #FFFFFF; --bs-btn-active-border-color: #FFFFFF; --bs-btn-active-color: #1C1D20;
}
[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: #FF6B7D; --bs-btn-border-color: #FF6B7D;
    --bs-btn-hover-bg: #D6203C; --bs-btn-hover-border-color: #D6203C; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #B81830; --bs-btn-active-border-color: #B81830; --bs-btn-active-color: #FFFFFF;
    --bs-btn-focus-shadow-rgb: 255, 107, 125;
}
/* .btn-outline-light and .btn-light are drawn FOR a dark ground already; on an ink
   page .btn-light's near-white fill keeps Bootstrap's black label, which is correct. */
/* Pagination is hardcoded hex in the light skin above, so it needs a real twin: the
   #282828 link colour is 1.05:1 on ink. #D6203C is reused from .btn-primary as the
   active fill (3.21:1 boundary, 5.08:1 white label); idle links take the body colour
   and the hover/focus colour is the on-dark red. */
/* colors.css's .accordion block below pins --bs-accordion-active-color/-bg to light hex,
   which DEFEATS Bootstrap's own defaults (var(--bs-primary-text-emphasis) /
   var(--bs-primary-bg-subtle)) -- those would have flipped on their own. Without this twin an
   expanded row renders near-black text on a near-white fill on every dark page, product
   accordions included. */
/* The light block pins --bs-breadcrumb-item-active-color to #282828, which lands on the
   now-dark .bg-light breadcrumb bar at 1.05:1. Bootstrap's own default would have flipped. */
[data-bs-theme=dark] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--brand-text-on-dark-2);
    --bs-breadcrumb-item-active-color: var(--brand-text-on-dark-2);
}

[data-bs-theme=dark] .accordion {
    --bs-accordion-active-color: var(--brand-text);
    --bs-accordion-active-bg: var(--brand-primary-subtle);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .35);
    --bs-accordion-border-color: var(--brand-border);
}

[data-bs-theme=dark] .pagination {
    --bs-pagination-color: #E4E6EA;
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: #3A3D42;
    --bs-pagination-hover-color: #FFFFFF;
    --bs-pagination-hover-bg: #2E3035;
    --bs-pagination-hover-border-color: #5A5E66;
    --bs-pagination-focus-color: #FFFFFF;
    --bs-pagination-focus-bg: #2E3035;
    --bs-pagination-active-color: #FFFFFF;
    --bs-pagination-active-bg: #D6203C;
    --bs-pagination-active-border-color: #D6203C;
    --bs-pagination-disabled-color: #7C828B;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: #3A3D42;
}

[data-bs-theme=dark] .btn-light {
    --bs-btn-bg: #E4E6EA; --bs-btn-border-color: #E4E6EA; --bs-btn-color: #1C1D20;
    --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-border-color: #FFFFFF; --bs-btn-hover-color: #1C1D20;
}