/* Bristol Maps design tokens (--bm-*).
 *
 * These replace the variables of the app's former CSS framework; the names
 * kept their old suffixes (e.g. --bm-muted-color), so the rename was
 * mechanical. Wherever Bootstrap 5.3 has an equivalent, the token is
 * an alias of the --bs-* variable, so the palette lives in ONE place:
 * assets/scss/bm-bootstrap.scss. Light/dark switch on [data-bs-theme], which
 * the head script in baseApp.html sets from prefers-color-scheme.
 *
 * Do not add new --bm-* names anywhere; tests/test_css_stack.py fails on them.
 */
:root,
[data-bs-theme="light"] {
    --bm-font-family-sans-serif: var(--bs-font-sans-serif);
    --bm-font-family-monospace: var(--bs-font-monospace);
    --bm-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bm-font-size: 14px;
    --bm-font-weight: 400;
    --bm-line-height: 1.4286;
    --bm-border-radius: var(--bs-border-radius);
    --bm-scrollbar-width: 0px;
    --bm-form-element-spacing-vertical: 4px;   /* pre-migration form spacing */
    --bm-form-element-spacing-horizontal: 10px;

    /* text */
    --bm-text-color: #000;
    --bm-color: var(--bs-body-color);
    --bm-muted-color: var(--bs-secondary-color);
    --bm-h1-color: #2d3138;
    --bm-h2-color: #373c44;
    --bm-h3-color: #424751;
    --bm-h4-color: #4d535e;
    --bm-h5-color: #5c6370;
    --bm-h6-color: #646b79;
    --bm-link-color: var(--bs-link-color);

    /* surfaces + borders */
    --bm-background-color: var(--bs-body-bg);
    --bm-page-background-color: var(--bs-body-bg);
    --bm-section-background-color: #6c7c7c;
    --bm-card-background-color: var(--bs-body-bg);
    --bm-card-sectioning-background-color: var(--bs-tertiary-bg);
    --bm-card-border-color: var(--bs-border-color);
    --bm-muted-border-color: var(--bs-border-color);
    --bm-border-color: var(--bs-border-color);
    --bm-table-border-color: var(--bs-border-color);
    --bm-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
    --bm-code-background-color: #f3f4f7;

    /* brand. --bm-primary is the ACCENT (text, borders, icons); anything that
       puts white text ON the brand colour uses --bm-primary-fill instead
       (misc_scripts/css_migration/primary_fill.py), because in dark mode no
       one teal reads well both ways. */
    --bm-primary: #2f4f4f;
    --bm-primary-fill: #2f4f4f;
    --bm-primary-rgb: 47, 79, 79;
    --bm-primary-background: #5a7c7c;
    --bm-primary-border: #5a7c7c;
    --bm-primary-hover: #1a3535;
    --bm-primary-hover-background: #6b9a9a;
    --bm-primary-focus: rgba(47, 79, 79, 0.2);
    --bm-primary-inverse: #fff;
    --bm-primary-underline: #5a7c7c;
    --bm-secondary: #5d6b89;
    --bm-secondary-alt: #2b4848;
    --bm-secondary-background: #525f7a;
    --bm-secondary-border: #525f7a;
    --bm-secondary-hover: #48536b;
    --bm-secondary-hover-background: #48536b;
    --bm-secondary-hover-border: #48536b;
    --bm-secondary-focus: rgba(93, 107, 137, 0.25);
    --bm-secondary-inverse: #fff;
    --bm-contrast: #181c25;
    --bm-contrast-inverse: #fff;

    /* status */
    --bm-del-color: #883835;
    --bm-del-background-color: #f8e1e0;
    --bm-del-border-color: #e6a7a4;
    --bm-ins-color: #1d6a54;
    --bm-ins-background-color: #dcf2ea;
    --bm-ins-border-color: #9fd6c3;
    --bm-mark-color: #0f1114;
    --bm-mark-background-color: #fde6c0;
    --bm-mark-border-color: #f2c26b;
    --bm-color-red-500: #d93526;
    --bm-color-green-500: #398712;
    --bm-color-amber-500: #ab6a00;
    --bm-danger-text: #b13a3a;
    --bm-danger-strong: #dc2626;

    /* form elements */
    --bm-form-element-background-color: #fbfbfc;
    --bm-form-element-border-color: #cfd5e2;
    --bm-form-element-color: #23262c;
    --bm-form-element-placeholder-color: #646b79;
    --bm-form-element-active-background-color: #fff;
    --bm-form-element-active-border-color: #5a7c7c;
    --bm-form-element-focus-color: #5a7c7c;
    --bm-form-element-disabled-background-color: #e9ecef;
    --bm-form-element-valid-color: #398712;
    --bm-form-element-invalid-color: #d93526;

    /* icons drawn by base.css (select chevron, switch knob, search glass) */
    --bm-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23373c44' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bm-switch-knob-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23949ba6'/%3e%3c/svg%3e");
    --bm-search-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646b79' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cline x1='21' y1='21' x2='16.65' y2='16.65'/%3e%3c/svg%3e");
    --bm-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

[data-bs-theme="dark"] {
    --bm-text-color: whitesmoke;
    --bm-h1-color: whitesmoke;
    --bm-h2-color: whitesmoke;
    --bm-h3-color: whitesmoke;
    --bm-h4-color: whitesmoke;
    --bm-h5-color: whitesmoke;
    --bm-h6-color: whitesmoke;

    --bm-section-background-color: #2c4040;
    --bm-card-background-color: #2c4040;
    --bm-card-sectioning-background-color: #253535;
    --bm-code-background-color: #1a1e28;

    --bm-primary: #8fb0b0;
    --bm-primary-rgb: 143, 176, 176;
    --bm-primary-fill: #2f4f4f;
    --bm-primary-background: #1d3030;
    --bm-primary-border: #1d3030;
    --bm-primary-hover: #315261;
    --bm-primary-hover-background: #79888f;
    --bm-primary-focus: rgba(107, 138, 138, 0.375);
    --bm-primary-underline: #2f4f4f;
    --bm-secondary: #446161;
    --bm-secondary-alt: #7fb3b3;
    --bm-secondary-background: #525f7a;
    --bm-secondary-border: #525f7a;
    --bm-secondary-hover: #b3b9c5;
    --bm-secondary-hover-background: #5d6b89;
    --bm-secondary-hover-border: #5d6b89;
    --bm-secondary-focus: rgba(144, 158, 190, 0.25);
    --bm-contrast: #dfe3eb;
    --bm-contrast-inverse: #000;

    --bm-del-color: #ce7e7b;
    --bm-del-background-color: #3a2424;
    --bm-del-border-color: #7a3a37;
    --bm-ins-color: #62af9a;
    --bm-ins-background-color: #1d3a32;
    --bm-ins-border-color: #2f6b59;
    --bm-mark-color: #fff;
    --bm-mark-background-color: #014063;
    --bm-mark-border-color: #0a5a86;
    --bm-color-red-500: #e5675c;
    --bm-color-green-500: #62af45;
    --bm-color-amber-500: #e09a2c;
    --bm-danger-text: #f28b82;
    --bm-danger-strong: #f87171;

    --bm-form-element-background-color: #263b3b;
    --bm-form-element-border-color: #4a6565;
    --bm-form-element-color: whitesmoke;
    --bm-form-element-placeholder-color: #8a9a9a;
    --bm-form-element-active-background-color: #2c4444;
    --bm-form-element-active-border-color: #6b8a8a;
    --bm-form-element-focus-color: #6b8a8a;
    --bm-form-element-disabled-background-color: #22322f;
    --bm-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e6eaea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bm-switch-knob-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a0b0b0'/%3e%3c/svg%3e");
    --bm-search-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0b0b0' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cline x1='21' y1='21' x2='16.65' y2='16.65'/%3e%3c/svg%3e");
}