/* ==========================================================================
   echoSignals — colour theme
   ==========================================================================

   The swappable layer. Load this as the element with id="theme-style", in
   place of css/themes/<name>.css: the App Builder drawer swaps that element's
   href, so echoSignals is the default and the template's own nine themes stay
   available. Typography, shape and the component layer are loaded separately
   and survive any such switch.

   It redefines the Bootstrap 5.3 tokens and the template's own shell variables
   rather than overriding selectors, so every template component — cards,
   tables, dropdowns, alerts, the header, the sidebar, the drawers — follows it
   for free.

   Generated from a verified palette. Every text colour clears WCAG AA (4.5:1)
   on all three surfaces of its mode and, where used as a pill, on its own 12%
   tint as well. Profit and loss additionally hold a 12+ point L* gap at dE 19+
   across protan/deutan/tritan, so they stay distinct when hue is gone
   entirely — the one pair here that must never be confused, because both are
   bare numbers with no icon to fall back on.

   Two things it deliberately does not do:
     * it never assumes the accent is legible as text. The fill, the link
       colour and the ink on the fill are three separate tokens, solved per
       mode, so an accent may be deep in light mode and light in dark.
     * it does not make colour the only signal. Green/amber/red collapse under
       deuteranopia however they are chosen, so every status pill carries an
       icon and a word, and every money figure an explicit + or -.

   A note if you switch to one of the template's nine: those are not
   contrast-validated for this panel. Solar, the closest to brand, puts its
   danger colour at 4.00:1 as text and collapses profit against loss to dE 8.9.
   ========================================================================== */


:root {
    /* LIGHT. Canvas is a cool off-white, not #fff: a panel stared at all day is
       easier on the eye slightly off pure white, and it lets cards sit forward
       on their own #fff without a shadow doing the work. Cool rather than
       warm because the accent is blue; the steps are lightness-matched to the
       warm set they replaced, so no text ratio moved. */

    /* surfaces, lightest to deepest */
    --es-canvas: #F4F6F8;
    --es-surface: #FFFFFF;
    --es-surface-2: #FAFBFC;
    --es-surface-3: #EDF0F3;

    /* lines. only --es-border-input is a meaningful UI boundary and it
       clears 3:1 on both the card and the canvas; the other two are
       decoration, where forcing a ratio would make every card a table */
    --es-border: #DDE2E8;
    --es-border-strong: #C3CAD3;
    --es-border-input: #838A8F;

    /* text ramp. all three clear 4.5:1 on every surface above */
    --es-text: #171A1D;
    --es-text-2: #565C63;
    --es-text-3: #676D74;

    /* brand. Three separate roles, never one value: --es-accent is
       the fill and the mark, --es-accent-text is the form that is
       legible as a link, and --es-accent-ink is what goes *on* the
       fill. They are solved per mode, so the fill is deep here and
       light in dark mode, and the ink flips with it. */
    --es-accent: #006ABC;
    --es-accent-text: #006ABC;
    --es-accent-ink: #FFFFFF;
    --es-accent-rgb: 0, 106, 188;

    /* semantic. pos/neg double as profit/loss and ok/error: they mean
       the same thing and two near-identical reds is a trap */
    --es-pos: #296E3D;
    --es-neg: #841D16;
    --es-warn: #8A5A00;
    --es-info: #175F8F;
    --es-idle: #545B62;

    /* ---- Bootstrap 5.3 tokens, so the template inherits all of it ---- */
    --bs-body-bg: #F4F6F8;
    --bs-body-bg-rgb: 244, 246, 248;
    --bs-body-color: #171A1D;
    --bs-body-color-rgb: 23, 26, 29;
    --bs-emphasis-color: #171A1D;
    --bs-secondary-color: #565C63;
    --bs-tertiary-color: #676D74;
    --bs-secondary-bg: #EDF0F3;
    --bs-tertiary-bg: #FAFBFC;
    --bs-border-color: #DDE2E8;
    --bs-border-color-translucent: #DDE2E8;
    --bs-link-color: #006ABC;
    --bs-link-hover-color: #171A1D;
    --bs-code-color: #006ABC;
    --bs-highlight-bg: #d1e4f3;

    /* Validation state. Four tokens that are easy to miss because
       nothing shows them until a field is actually wrong: left
       unset, an invalid input drew the base stylesheet's #fd3995
       pink and a valid one its #1dc9b7 teal. The border and the
       feedback text both take the verified loss/profit colours,
       which is also what the inline errors beside them use. */
    --bs-form-invalid-color: #841D16;
    --bs-form-invalid-border-color: #841D16;
    --bs-form-valid-color: #296E3D;
    --bs-form-valid-border-color: #296E3D;

    --bs-primary: #006ABC;
    --bs-primary-rgb: 0, 106, 188;
    --bs-primary-text-emphasis: #006ABC;
    --bs-primary-bg-subtle: #e8f2f9;
    --bs-primary-border-subtle: #bdd8ee;
    --bs-success: #296E3D;
    --bs-success-rgb: 41, 110, 61;
    --bs-success-text-emphasis: #296E3D;
    --bs-success-bg-subtle: #ecf2ee;
    --bs-success-border-subtle: #c7d9cd;
    --bs-danger: #841D16;
    --bs-danger-rgb: 132, 29, 22;
    --bs-danger-text-emphasis: #841D16;
    --bs-danger-bg-subtle: #f4ebea;
    --bs-danger-border-subtle: #dfc4c2;
    --bs-warning: #8A5A00;
    --bs-warning-rgb: 138, 90, 0;
    --bs-warning-text-emphasis: #8A5A00;
    --bs-warning-bg-subtle: #f4f0e8;
    --bs-warning-border-subtle: #e1d4bd;
    --bs-info: #175F8F;
    --bs-info-rgb: 23, 95, 143;
    --bs-info-text-emphasis: #175F8F;
    --bs-info-bg-subtle: #eaf1f5;
    --bs-info-border-subtle: #c3d5e2;

    --bs-secondary: #545B62;
    --bs-secondary-rgb: 84, 91, 98;
    --bs-secondary-text-emphasis: #565C63;
    --bs-secondary-bg-subtle: #EDF0F3;
    --bs-secondary-border-subtle: #DDE2E8;

    /* cards and surfaces the template reads from */
    --bs-card-bg: #FFFFFF;
    --bs-card-cap-bg: #FAFBFC;
    --bs-card-border-color: #DDE2E8;
    --bs-dropdown-bg: #FFFFFF;
    --bs-dropdown-border-color: #DDE2E8;
    --bs-dropdown-link-color: #171A1D;
    --bs-dropdown-link-hover-bg: #EDF0F3;
    --bs-dropdown-link-hover-color: #171A1D;
    --bs-dropdown-link-active-bg: #dbeaf6;
    --bs-dropdown-link-active-color: #171A1D;
    --bs-dropdown-link-disabled-color: #676D74;
    --bs-dropdown-header-color: #676D74;
    --bs-modal-bg: #FFFFFF;
    --bs-modal-border-color: #DDE2E8;
    --bs-modal-header-border-color: #DDE2E8;
    --bs-modal-footer-border-color: #DDE2E8;
    --bs-table-color: #171A1D;
    --bs-table-bg: transparent;
    --bs-table-border-color: #DDE2E8;
    --bs-table-hover-bg: #FAFBFC;
    --bs-table-hover-color: #171A1D;
    --bs-table-striped-bg: #FAFBFC;
    --bs-breadcrumb-divider-color: #676D74;
    --bs-breadcrumb-item-active-color: #565C63;

    /* ---- SmartAdmin shell ----

       The template consumes bare RGB triples as rgba(var(--x), a) in
       about a hundred places, alongside the --bs-*-rgb pairs. Every
       one of them has to be set or it silently falls back to the base
       stylesheet: leaving --danger unset renders the mobile menu
       button in the base pink (253, 57, 149), which is how this list
       was found. ---- */
    --primary: 0, 106, 188;
    --secondary: 84, 91, 98;
    --success: 41, 110, 61;
    --danger: 132, 29, 22;
    --warning: 138, 90, 0;
    --info: 23, 95, 143;
    --fusion: 86, 92, 99;
    --white: 255, 255, 255;
    --background-image-color: 244, 246, 248;

    /* the --bs-*-rgb pairs the template blends with */
    --bs-emphasis-color-rgb: 23, 26, 29;
    --bs-dark-rgb: 23, 26, 29;
    --bs-light-rgb: 237, 240, 243;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-secondary-bg-rgb: 237, 240, 243;
    --bs-tertiary-bg-rgb: 250, 251, 252;
    --bs-link-color-rgb: 0, 106, 188;
    --bs-link-hover-color-rgb: 23, 26, 29;
    --bs-btn-focus-shadow-rgb: 0, 106, 188;
    --app-content-background: #F4F6F8;
    --app-header-background: #FFFFFF;
    --app-nav-background: #FFFFFF;
    --app-card-bg: #FFFFFF;
    --app-panel-bg: #FFFFFF;
    --app-drawer-background: #FFFFFF;
    --app-dropdown-bg: #FFFFFF;
    --app-dropdown-border-color: #DDE2E8;
    --app-dropdown-link-color: #171A1D;
    --app-dropdown-link-hover-bg: #EDF0F3;
    --app-dropdown-link-hover-color: #171A1D;
    --app-layout-border-color: #DDE2E8;
    --app-nav-border-color: #DDE2E8;
    --app-panel-border-color: #DDE2E8;
    --app-nav-link-color: #565C63;
    --app-nav-link-hover-color: #171A1D;
    --app-nav-link-active-color: #006ABC;
    --app-nav-item-hover-bg: #EDF0F3;
    --app-nav-item-active-bg: rgba(var(--es-accent-rgb), 0.1);
    --app-nav-item-active-indicator: #006ABC;
    --app-nav-title-color: #676D74;
    --app-nav-collapse-sign-color: #676D74;
    --app-scrollbar-bg: transparent;
    --app-scrollbar-thumb: #C3CAD3;
    --app-scrollbar-thumb-hover: #676D74;
    --logo-color: #006ABC;
    --logo-color-fill: transparent;

    /* Charts. Gridlines are scaffolding, not data: borrowing the card
       border token makes them read stronger than the series on a dark
       ground, which sends the eye to the grid first. */
    --es-chart-grid: #DDE2E8;
    --es-chart-label: #676D74;

    /* ---- ramps ----

       The base stylesheet is built on seven 18-step ramps and reads them
       directly: --primary-500 alone is referenced 49 times, and the
       animated backdrop behind the logo is defined as var(--primary-500)
       and var(--primary-200). Leaving them unset lets the base purple,
       pink and teal through — which is how the magenta mobile-menu button
       was found. Generated in Lab so the steps are perceptually even,
       with chroma tapered at both ends so tints do not glow and shades do
       not turn to mud. Defined once, as the template does, and inherited
       by dark mode. ---- */
    /* primary */
    --primary-50: #899cc3;
    --primary-100: #7f96c4;
    --primary-150: #7490c5;
    --primary-200: #698bc5;
    --primary-250: #5d85c5;
    --primary-300: #5180c5;
    --primary-350: #437ac4;
    --primary-400: #3375c2;
    --primary-450: #206fc0;
    --primary-500: #006abc;
    --primary-550: #005fad;
    --primary-600: #00539c;
    --primary-650: #00498c;
    --primary-700: #003e7b;
    --primary-750: #00336a;
    --primary-800: #002959;
    --primary-850: #002049;
    --primary-900: #00183b;

    /* secondary */
    --secondary-50: #95989b;
    --secondary-100: #8f9396;
    --secondary-150: #888d91;
    --secondary-200: #82878c;
    --secondary-250: #7c8286;
    --secondary-300: #767c81;
    --secondary-350: #70767c;
    --secondary-400: #6a7177;
    --secondary-450: #656b71;
    --secondary-500: #5f666c;
    --secondary-550: #545b60;
    --secondary-600: #495055;
    --secondary-650: #3f454a;
    --secondary-700: #353a3f;
    --secondary-750: #2b3034;
    --secondary-800: #222629;
    --secondary-850: #191c1f;
    --secondary-900: #15181a;

    /* success */
    --success-50: #86ad92;
    --success-100: #7aa889;
    --success-150: #6fa380;
    --success-200: #639f77;
    --success-250: #579a6f;
    --success-300: #4b9567;
    --success-350: #3f905f;
    --success-400: #338b57;
    --success-450: #268550;
    --success-500: #18804a;
    --success-550: #077440;
    --success-600: #006737;
    --success-650: #005b2f;
    --success-700: #004f27;
    --success-750: #00431f;
    --success-800: #003818;
    --success-850: #002c11;
    --success-900: #002207;

    /* danger */
    --danger-50: #d28b7f;
    --danger-100: #d38274;
    --danger-150: #d47869;
    --danger-200: #d46f5f;
    --danger-250: #d36555;
    --danger-300: #d25b4b;
    --danger-350: #cf5142;
    --danger-400: #cd473a;
    --danger-450: #c93d32;
    --danger-500: #c4342b;
    --danger-550: #b32923;
    --danger-600: #a21e1b;
    --danger-650: #901515;
    --danger-700: #7f0c0f;
    --danger-750: #6d0407;
    --danger-800: #5c0000;
    --danger-850: #4c0000;
    --danger-900: #3d0000;

    /* warning */
    --warning-50: #c1a37b;
    --warning-100: #be9d6d;
    --warning-150: #bb965f;
    --warning-200: #b79052;
    --warning-250: #b38945;
    --warning-300: #af8339;
    --warning-350: #aa7d2c;
    --warning-400: #a5771f;
    --warning-450: #a07110;
    --warning-500: #9a6b00;
    --warning-550: #8c6000;
    --warning-600: #7e5500;
    --warning-650: #704b00;
    --warning-700: #624000;
    --warning-750: #553600;
    --warning-800: #482d00;
    --warning-850: #3c2300;
    --warning-900: #311a00;

    /* info */
    --info-50: #8aa0bb;
    --info-100: #7f9aba;
    --info-150: #7595b9;
    --info-200: #6a8fb8;
    --info-250: #5f8ab6;
    --info-300: #5484b4;
    --info-350: #487fb2;
    --info-400: #3b7aaf;
    --info-450: #2d74ac;
    --info-500: #1f6fa8;
    --info-550: #0c639a;
    --info-600: #00588b;
    --info-650: #004d7c;
    --info-700: #00426c;
    --info-750: #00375d;
    --info-800: #002d4e;
    --info-850: #00233f;
    --info-900: #001a32;

    /* fusion */
    --fusion-50: #8b8e91;
    --fusion-100: #85888c;
    --fusion-150: #7f8287;
    --fusion-200: #797d82;
    --fusion-250: #73777d;
    --fusion-300: #6d7278;
    --fusion-350: #676c72;
    --fusion-400: #61676d;
    --fusion-450: #5b6168;
    --fusion-500: #565c63;
    --fusion-550: #4b5158;
    --fusion-600: #41464c;
    --fusion-650: #363b41;
    --fusion-700: #2d3136;
    --fusion-750: #23272c;
    --fusion-800: #1a1d21;
    --fusion-850: #15181b;
    --fusion-900: #15181b;

}

:root[data-bs-theme="dark"] {
    /* DARK. Deep blue-black rather than neutral grey, which keeps a cool accent
       reading as itself rather than as a wash. Elevation is carried by surface
       steps and borders, not shadow — a shadow on a near-black ground is
       invisible and only costs paint time. */

    /* surfaces, lightest to deepest */
    --es-canvas: #0B0F14;
    --es-surface: #12171E;
    --es-surface-2: #171D25;
    --es-surface-3: #1D242E;

    /* lines. only --es-border-input is a meaningful UI boundary and it
       clears 3:1 on both the card and the canvas; the other two are
       decoration, where forcing a ratio would make every card a table */
    --es-border: #232B35;
    --es-border-strong: #33404D;
    --es-border-input: #5B6670;

    /* text ramp. all three clear 4.5:1 on every surface above */
    --es-text: #E7EAEE;
    --es-text-2: #A2AAB4;
    --es-text-3: #8B949E;

    /* brand. Three separate roles, never one value: --es-accent is
       the fill and the mark, --es-accent-text is the form that is
       legible as a link, and --es-accent-ink is what goes *on* the
       fill. They are solved per mode, so the fill is deep here and
       light in dark mode, and the ink flips with it. */
    --es-accent: #4B9DFF;
    --es-accent-text: #5CA2FF;
    --es-accent-ink: #0A0A0A;
    --es-accent-rgb: 75, 157, 255;

    /* semantic. pos/neg double as profit/loss and ok/error: they mean
       the same thing and two near-identical reds is a trap */
    --es-pos: #74D69B;
    --es-neg: #F5786F;
    --es-warn: #E8B765;
    --es-info: #79C0E8;
    --es-idle: #A7AEB5;

    /* ---- Bootstrap 5.3 tokens, so the template inherits all of it ---- */
    --bs-body-bg: #0B0F14;
    --bs-body-bg-rgb: 11, 15, 20;
    --bs-body-color: #E7EAEE;
    --bs-body-color-rgb: 231, 234, 238;
    --bs-emphasis-color: #E7EAEE;
    --bs-secondary-color: #A2AAB4;
    --bs-tertiary-color: #8B949E;
    --bs-secondary-bg: #1D242E;
    --bs-tertiary-bg: #171D25;
    --bs-border-color: #232B35;
    --bs-border-color-translucent: #232B35;
    --bs-link-color: #5CA2FF;
    --bs-link-hover-color: #E7EAEE;
    --bs-code-color: #5CA2FF;
    --bs-highlight-bg: #1c2f46;

    /* Validation state. Four tokens that are easy to miss because
       nothing shows them until a field is actually wrong: left
       unset, an invalid input drew the base stylesheet's #fd3995
       pink and a valid one its #1dc9b7 teal. The border and the
       feedback text both take the verified loss/profit colours,
       which is also what the inline errors beside them use. */
    --bs-form-invalid-color: #F5786F;
    --bs-form-invalid-border-color: #F5786F;
    --bs-form-valid-color: #74D69B;
    --bs-form-valid-border-color: #74D69B;

    --bs-primary: #4B9DFF;
    --bs-primary-rgb: 75, 157, 255;
    --bs-primary-text-emphasis: #5CA2FF;
    --bs-primary-bg-subtle: #1a2a3e;
    --bs-primary-border-subtle: #244266;
    --bs-success: #74D69B;
    --bs-success-rgb: 116, 214, 155;
    --bs-success-text-emphasis: #74D69B;
    --bs-success-bg-subtle: #203230;
    --bs-success-border-subtle: #315446;
    --bs-danger: #F5786F;
    --bs-danger-rgb: 245, 120, 111;
    --bs-danger-text-emphasis: #F5786F;
    --bs-danger-bg-subtle: #322529;
    --bs-danger-border-subtle: #5b3638;
    --bs-warning: #E8B765;
    --bs-warning-rgb: 232, 183, 101;
    --bs-warning-text-emphasis: #E8B765;
    --bs-warning-bg-subtle: #302d28;
    --bs-warning-border-subtle: #564a35;
    --bs-info: #79C0E8;
    --bs-info-rgb: 121, 192, 232;
    --bs-info-text-emphasis: #79C0E8;
    --bs-info-bg-subtle: #202f3a;
    --bs-info-border-subtle: #334d5f;

    --bs-secondary: #A7AEB5;
    --bs-secondary-rgb: 167, 174, 181;
    --bs-secondary-text-emphasis: #A2AAB4;
    --bs-secondary-bg-subtle: #1D242E;
    --bs-secondary-border-subtle: #232B35;

    /* cards and surfaces the template reads from */
    --bs-card-bg: #12171E;
    --bs-card-cap-bg: #171D25;
    --bs-card-border-color: #232B35;
    --bs-dropdown-bg: #12171E;
    --bs-dropdown-border-color: #232B35;
    --bs-dropdown-link-color: #E7EAEE;
    --bs-dropdown-link-hover-bg: #1D242E;
    --bs-dropdown-link-hover-color: #E7EAEE;
    --bs-dropdown-link-active-bg: #1a2a3e;
    --bs-dropdown-link-active-color: #E7EAEE;
    --bs-dropdown-link-disabled-color: #8B949E;
    --bs-dropdown-header-color: #8B949E;
    --bs-modal-bg: #12171E;
    --bs-modal-border-color: #232B35;
    --bs-modal-header-border-color: #232B35;
    --bs-modal-footer-border-color: #232B35;
    --bs-table-color: #E7EAEE;
    --bs-table-bg: transparent;
    --bs-table-border-color: #232B35;
    --bs-table-hover-bg: #171D25;
    --bs-table-hover-color: #E7EAEE;
    --bs-table-striped-bg: #171D25;
    --bs-breadcrumb-divider-color: #8B949E;
    --bs-breadcrumb-item-active-color: #A2AAB4;

    /* ---- SmartAdmin shell ----

       The template consumes bare RGB triples as rgba(var(--x), a) in
       about a hundred places, alongside the --bs-*-rgb pairs. Every
       one of them has to be set or it silently falls back to the base
       stylesheet: leaving --danger unset renders the mobile menu
       button in the base pink (253, 57, 149), which is how this list
       was found. ---- */
    --primary: 75, 157, 255;
    --secondary: 167, 174, 181;
    --success: 116, 214, 155;
    --danger: 245, 120, 111;
    --warning: 232, 183, 101;
    --info: 121, 192, 232;
    --fusion: 162, 170, 180;
    --white: 255, 255, 255;
    --background-image-color: 11, 15, 20;

    /* the --bs-*-rgb pairs the template blends with */
    --bs-emphasis-color-rgb: 231, 234, 238;
    --bs-dark-rgb: 231, 234, 238;
    --bs-light-rgb: 29, 36, 46;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-secondary-bg-rgb: 29, 36, 46;
    --bs-tertiary-bg-rgb: 23, 29, 37;
    --bs-link-color-rgb: 92, 162, 255;
    --bs-link-hover-color-rgb: 231, 234, 238;
    --bs-btn-focus-shadow-rgb: 75, 157, 255;
    --app-content-background: #0B0F14;
    --app-header-background: #12171E;
    --app-nav-background: #12171E;
    --app-card-bg: #12171E;
    --app-panel-bg: #12171E;
    --app-drawer-background: #12171E;
    --app-dropdown-bg: #12171E;
    --app-dropdown-border-color: #232B35;
    --app-dropdown-link-color: #E7EAEE;
    --app-dropdown-link-hover-bg: #1D242E;
    --app-dropdown-link-hover-color: #E7EAEE;
    --app-layout-border-color: #232B35;
    --app-nav-border-color: #232B35;
    --app-panel-border-color: #232B35;
    --app-nav-link-color: #A2AAB4;
    --app-nav-link-hover-color: #E7EAEE;
    --app-nav-link-active-color: #E7EAEE;
    --app-nav-item-hover-bg: #1D242E;
    --app-nav-item-active-bg: rgba(var(--es-accent-rgb), 0.14);
    --app-nav-item-active-indicator: #4B9DFF;
    --app-nav-title-color: #8B949E;
    --app-nav-collapse-sign-color: #8B949E;
    --app-scrollbar-bg: transparent;
    --app-scrollbar-thumb: #33404D;
    --app-scrollbar-thumb-hover: #8B949E;
    --logo-color: #4B9DFF;
    --logo-color-fill: transparent;

    /* Charts. Gridlines are scaffolding, not data: borrowing the card
       border token makes them read stronger than the series on a dark
       ground, which sends the eye to the grid first. */
    --es-chart-grid: #1D242E;
    --es-chart-label: #8B949E;
}

/* Gold fill, dark ink. 7.8:1, and it is the one place the brand colour gets
   to be the loudest thing on the page. */
.btn-primary {
    --bs-btn-bg: var(--es-accent);
    --bs-btn-border-color: var(--es-accent);
    --bs-btn-color: var(--es-accent-ink);
    --bs-btn-hover-bg: #c29315;
    --bs-btn-hover-border-color: #c29315;
    --bs-btn-hover-color: var(--es-accent-ink);
    --bs-btn-active-bg: #ad8312;
    --bs-btn-active-border-color: #ad8312;
    --bs-btn-active-color: var(--es-accent-ink);
    --bs-btn-disabled-bg: var(--es-border-strong);
    --bs-btn-disabled-border-color: var(--es-border-strong);
    --bs-btn-disabled-color: var(--es-surface);
}

.btn-outline-secondary {
    --bs-btn-color: var(--es-text);
    --bs-btn-border-color: var(--es-border-input);
    --bs-btn-hover-bg: var(--es-surface-3);
    --bs-btn-hover-border-color: var(--es-border-strong);
    --bs-btn-hover-color: var(--es-text);
    --bs-btn-active-bg: var(--es-surface-3);
    --bs-btn-active-border-color: var(--es-accent);
    --bs-btn-active-color: var(--es-text);
}

.btn-outline-danger {
    --bs-btn-color: var(--es-neg);
    --bs-btn-border-color: var(--es-neg);
    --bs-btn-hover-bg: var(--es-neg);
    --bs-btn-hover-color: var(--es-surface);
}

.btn-danger  { --bs-btn-bg: var(--es-neg); --bs-btn-border-color: var(--es-neg); --bs-btn-color: #fff; }
.btn-success { --bs-btn-bg: var(--es-pos); --bs-btn-border-color: var(--es-pos); --bs-btn-color: #fff; }
/* .btn-warning is painted DIRECTLY, not through --bs-btn-bg, because
   SmartAdmin sets background-color on this class and a custom property loses
   to a real declaration every time. The token version of this rule looked
   correct in the source and rendered #9a6b00 — SmartAdmin's amber — at
   4.10:1 against our ink. Same defect class as the icons and the KPI chips:
   the check has to measure the property the RENDERER uses. */
.btn-warning {
    background-color: var(--es-warn);
    border-color: var(--es-warn);
    color: #fff;
    --bs-btn-bg: var(--es-warn);
    --bs-btn-border-color: var(--es-warn);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--es-warn);
    --bs-btn-hover-border-color: var(--es-warn);
    --bs-btn-hover-color: #fff;
}

/* A filled button inverts in dark mode, and white-on-token stops working.
   --es-neg, --es-pos and --es-warn are the DARK variants there: light,
   readable as text on a dark surface, and therefore a light BACKGROUND under
   a filled button. White text on them measured 2.69:1 on `.btn-danger` —
   which was the "Close every follower position" button, the single most
   consequential control on the platform, failing AA on the page where it
   closes a hundred strangers' positions.

   The ink is the dark canvas rather than pure black so the button still
   belongs to the palette. Declared here rather than on :root[data-bs-theme]
   because --bs-btn-color is read on the button, and redefining a token
   anywhere other than the element that reads it is how three earlier defects
   in this build happened. */
:root[data-bs-theme="dark"] .btn-danger,
:root[data-bs-theme="dark"] .btn-success,
:root[data-bs-theme="dark"] .btn-warning {
    --bs-btn-color: var(--es-canvas);
    --bs-btn-hover-color: var(--es-canvas);
    --bs-btn-active-color: var(--es-canvas);
    --bs-btn-disabled-color: var(--es-canvas);
}

:root[data-bs-theme="dark"] .btn-warning {
    color: var(--es-canvas);
    --bs-btn-hover-color: var(--es-canvas);
}

.card {
    background: var(--es-surface);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    box-shadow: var(--es-shadow-sm);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--es-border);
    padding: 0.875rem 1rem;
}

.card-body { padding: 1rem; }
.card-footer {
    background: var(--es-surface-2);
    border-top: 1px solid var(--es-border);
    padding: 0.75rem 1rem;
}

.alert {
    border-radius: var(--es-radius-sm);
    font-size: var(--es-text-sm);
    border-width: 1px;
}

.badge { font-weight: 500; font-size: var(--es-text-nano); letter-spacing: 0.02em; }

.dropdown-menu {
    border-radius: var(--es-radius);
    border-color: var(--es-border);
    box-shadow: var(--es-shadow-lg);
    font-size: var(--es-text-sm);
}

.modal-content {
    border-radius: var(--es-radius-lg);
    border-color: var(--es-border);
}

/* --- variants the base stylesheet hardcodes -------------------------------
   These rules carry literal hex values (#886ab5, #fd3995, #ffc241, #1dc9b7)
   rather than reading a token, so no amount of variable overriding reaches
   them. Each is restated on the ramp it should have been using. */

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--es-accent);
    border-color: var(--es-accent);
}

.form-check-input:focus {
    border-color: var(--es-accent);
    box-shadow: 0 0 0 3px rgba(var(--es-accent-rgb), 0.18);
}

/* The switch knob is a background-image data-URI in the base stylesheet, so it
   keeps its own colour; forcing the track is enough for the state to read. */
.form-switch .form-check-input:checked { background-color: var(--es-accent); }

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--es-accent);
    --bs-nav-pills-link-active-color: var(--es-accent-ink);
}

.progress, .progress-stacked {
    --bs-progress-bar-bg: var(--es-accent);
    --bs-progress-bg: var(--es-surface-3);
}

.list-group { --bs-list-group-active-bg: var(--es-accent); --bs-list-group-active-border-color: var(--es-accent); }

.btn-warning {
    --bs-btn-bg: var(--warning-500);
    --bs-btn-border-color: var(--warning-500);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--warning-600);
    --bs-btn-hover-border-color: var(--warning-600);
    --bs-btn-hover-color: #fff;
}

.btn-info {
    --bs-btn-bg: var(--info-500);
    --bs-btn-border-color: var(--info-500);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--info-600);
    --bs-btn-hover-border-color: var(--info-600);
    --bs-btn-hover-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--es-accent-text);
    --bs-btn-border-color: var(--es-accent);
    --bs-btn-hover-bg: var(--es-accent);
    --bs-btn-hover-border-color: var(--es-accent);
    --bs-btn-hover-color: var(--es-accent-ink);
}

/* The notification badge is painted from --danger-500 with #fff on top; the
   ramp seed was chosen so that pairing clears AA (5.42:1). */
.badge.badge-icon { background-color: var(--danger-500); color: #fff; }

/* The base stylesheet paints the mobile menu toggle from --danger, which makes
   a hamburger button look like a delete button. It is a navigation control, so
   it takes the accent. */
.mobile-menu-icon {
    background: var(--es-accent);
    border-color: var(--es-accent);
    color: var(--es-accent-ink);
}

.mobile-menu-icon > svg {
    stroke: var(--es-accent-ink);
    fill: none;
}

/* The shell. The header and sidebar share the card surface so the whole panel
   reads as one plane with the canvas behind it, rather than three greys. */
.app-header {
    background: var(--es-surface);
    border-bottom: 1px solid var(--es-border);
}

.app-sidebar {
    background: var(--es-surface);
    border-right: 1px solid var(--es-border);
}

.app-content, .app-body { background: var(--es-canvas); }

.primary-nav a {
    font-size: var(--es-text-sm);
    font-weight: 500;
}

.nav-title span {
    font-size: var(--es-text-nano);
    font-weight: 600;
    letter-spacing: var(--es-track-label);
    text-transform: uppercase;
}

.app-footer {
    background: var(--es-surface);
    border-top: 1px solid var(--es-border);
    font-size: var(--es-text-xs);
}

.app-search .form-control {
    font-size: var(--es-text-sm);
    background: var(--es-surface-3);
    border-color: transparent;
}
.app-search .form-control:focus { background: var(--es-surface); }

/* Focus. One visible ring everywhere, in the brand colour, because the
   template's default is a box-shadow: none that removes it entirely. */
:focus-visible {
    outline: 2px solid var(--es-accent);
    outline-offset: 2px;
}
.btn:focus-visible, .form-control:focus-visible, .es-select-toggle:focus-visible {
    outline: 2px solid var(--es-accent);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}