/**
 * Funderial Theme Color System
 * 
 * This file defines all color variables used throughout the application.
 * Each theme can be implemented by changing these CSS custom properties.
 * 
 * Structure:
 * - Primary colors (main brand colors)
 * - Dark/Accent colors (darker variants)
 * - Background colors
 * - Text/Foreground colors
 * - Border colors
 * - Status colors (error, success, warning)
 * - Email-specific colors
 *
 * Theme contract: every new theme must define its brand surfaces together with
 * --color-on-*, --color-primary-text, --color-theme-preview,
 * --color-page-gradient-*, and --color-action-* companions.
 * --color-theme-preview is the ISO portal swatch and the exact midpoint of the
 * referral page gradient, so the preview represents the rendered background.
 * Keep normal text at 4.5:1 contrast or better and large text/UI graphics at
 * 3:1 or better against every surface where the token is used.
 */

/* ========================================
   DEFAULT THEME: BLUE
   ======================================== */

:root {
    /* PRIMARY COLORS */
    --color-primary: #3490dc;           /* Primary blue - buttons, links, nav highlights */
    --color-primary-rgb: 52, 144, 220;  /* Primary blue as RGB values for alpha overlays */
    --color-primary-dark: #226498;      /* Dark blue - headers, top bars, form sections */
    --color-primary-dark-rgb: 34, 100, 152;
    --color-primary-hover: #1d68a7;     /* Hover state for primary blue */
    --color-primary-light: #cce3f6;     /* Light blue for backgrounds */
    --color-primary-pale: #F0F5FF;      /* Pale blue for sections */
    --color-primary-text: #1d68a7;      /* Accessible primary-colored text on light surfaces */
    --color-on-primary: #000000;        /* Accessible text/icons on the primary surface */
    --color-on-primary-hover: #ffffff;  /* Accessible text/icons on the primary hover surface */
    --color-on-primary-dark: #ffffff;   /* Accessible text/icons on the primary-dark surface */
    --color-page-gradient-start: #29649a;
    --color-theme-preview: #14547f;
    --color-page-gradient-end: #004363;
    --color-theme-detail: #7dd3fc;
    --color-heading-underline: var(--color-theme-detail);
    --color-progress-active: var(--color-theme-detail);
    --color-progress-inactive: rgba(255, 255, 255, 0.65);
    --color-panel-border: var(--color-theme-detail);
    --color-action-background: #002f47;
    --color-action-background-hover: #001f30;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;
    --color-action-border: var(--color-theme-detail);
    --color-action-border-hover: #ffffff;
    
    /* SECONDARY COLORS */
    --color-secondary: #6c757d;         /* Gray - secondary elements */
    --color-secondary-rgb: 108, 117, 125;
    --color-secondary-dark: #545b62;    /* Darker gray */
    --color-secondary-light: #e9ecef;   /* Light gray */
    --color-on-secondary: #ffffff;
    --color-on-secondary-hover: #ffffff;
    --color-on-secondary-dark: #ffffff;
    
    /* ACCENT COLORS */
    --color-accent: #07ad87;            /* Green/Teal - CTAs, accents */
    --color-accent-hover: #049960;      /* Darker green on hover */
    --color-accent-light: #c7eed8;      /* Light green */
    --color-on-accent: #000000;
    --color-on-accent-hover: #000000;
    
    /* HIGHLIGHT COLORS */
    --color-highlight: #F8BB2B;         /* Gold - buttons, accents */
    --color-highlight-rgb: 248, 187, 43;
    --color-highlight-dark: #f8ba1e;    /* Darker gold */
    --color-highlight-light: #ffe924;   /* Lighter gold */
    --color-highlight-pale: #eeb21c;    /* Alternative gold */
    --color-on-highlight: #000000;
    
    /* BACKGROUND COLORS */
    --color-bg-primary: #ffffff;        /* Primary white background */
    --color-bg-secondary: #f8fafc;      /* Light gray background - page background */
    --color-bg-tertiary: #F0F5FF;       /* Light blue background - sections */
    --color-bg-email: #F6FAFF;          /* Email page background */
    --color-bg-error: #d2420e;          /* Error message background */
    --color-bg-surface-muted: #e1e1e1;  /* light gray surface used in nav and sections */
    --color-bg-overlay: rgba(0, 0, 0, 0.65);
    --color-bg-overlay-soft: rgba(0, 0, 0, 0.25);
    --color-bg-overlay-medium: rgba(0, 0, 0, 0.3);
    --color-bg-overlay-elevated: rgba(0, 0, 0, 0.35);
    --color-bg-overlay-strong: rgba(0, 0, 0, 0.75);
    --color-bg-light-overlay-faint: rgba(255, 255, 255, 0.053);
    --color-bg-light-overlay-soft: rgba(255, 255, 255, 0.2);
    --color-bg-light-overlay: rgba(255, 255, 255, 0.9);
    --color-bg-contrast: #111111;
    --color-disabled-surface: rgba(197, 197, 197, 0.55);
    --color-loader-track: #f3f3f3;      /* spinner track */
    
    /* TEXT COLORS */
    --color-text-primary: #212529;      /* Primary dark text */
    --color-text-secondary: #202020;    /* Secondary dark text */
    --color-text-tertiary: #495057;     /* Tertiary gray text */
    --color-text-muted: #6c757d;        /* Muted light gray text */
    --color-text-light: #ffffff;        /* Light/white text on dark backgrounds */
    
    /* BORDER COLORS */
    --color-border-primary: #dee2e6;    /* Primary border color */
    --color-border-light: #ced4da;      /* Light border color */
    --color-border-email: #E6EDF7;      /* Email template border */
    --color-border-light-translucent: rgba(255, 255, 255, 0.35);

    /* SHADOW COLORS */
    --color-shadow-subtle: rgba(0, 0, 0, 0.105);
    --color-shadow-light: rgba(0, 0, 0, 0.2);
    --color-shadow-medium: rgba(0, 0, 0, 0.25);
    --color-shadow-strong: rgba(0, 0, 0, 0.3);
    
    /* STATUS COLORS */
    --color-success: #38c172;           /* Success green */
    --color-success-hover: #2fa360;     /* Hover green */
    --color-success-light: #c7eed8;     /* Light green background */
    --color-success-text: #155724;      /* Accessible text on success alerts */
    
    --color-danger: #e3342f;            /* Danger red */
    --color-danger-hover: #c51f1a;      /* Hover red */
    --color-danger-light: #f7c6c5;      /* Light red background */
    --color-danger-text: #721c24;       /* Accessible text on danger alerts */
    --color-required-text: var(--color-highlight-light);
    
    --color-warning: #ffed4a;           /* Warning yellow */
    --color-warning-hover: #ffe817;     /* Hover yellow */
    --color-warning-light: #fffacc;     /* Light yellow background */
    
    --color-info: #6cb2eb;              /* Info cyan */
    --color-info-hover: #4aa0e6;        /* Hover cyan */
    --color-info-light: #d6e9f9;        /* Light cyan background */
    
    /* EMAIL-SPECIFIC COLORS */
    --color-email-header: #0F5CB7;      /* Email header background */
    --color-email-text: #102238;        /* Email primary text */
    --color-email-link: #1C6899;        /* Email link color */
    
    /* UTILITY COLORS */
    --color-black: #000000;             /* Pure black */
    --color-white: #ffffff;             /* Pure white */
    
    /* THEME IDENTIFIER (for CSS targeting) */
    --theme-name: 'blue';
}

/* ========================================
   THEME: GOLD (legacy alias: yellow)
   ======================================== */

:root[data-theme="gold"],
:root[data-theme="yellow"] {
    --color-primary: #F8BB2B;           /* Gold primary */
    --color-primary-rgb: 248, 187, 43;
    --color-primary-dark: #d4940a;      /* Darker gold */
    --color-primary-dark-rgb: 212, 148, 10;
    --color-primary-hover: #f8ba1e;     /* Hover gold */
    --color-primary-light: #ffe924;     /* Light gold */
    --color-primary-pale: #fffacc;      /* Pale yellow */
    --color-primary-text: #7a5300;
    --color-on-primary: #000000;
    --color-on-primary-hover: #000000;
    --color-on-primary-dark: #000000;
    --color-page-gradient-start: #704800;
    --color-theme-preview: #784f00;
    --color-page-gradient-end: #805500;
    --color-theme-detail: #fda4af;
    --color-action-background: #3f2700;
    --color-action-background-hover: #2d1c00;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;
    --color-required-text: var(--color-primary-pale);
    
    --color-accent: #226498;            /* Dark blue as secondary accent */
    --color-accent-hover: #1d68a7;      /* Hover dark blue */
    --color-accent-light: #cce3f6;      /* Light blue */
    --color-on-accent: #ffffff;
    --color-on-accent-hover: #ffffff;
    
    --color-highlight: #e3342f;         /* Red highlight */
    --color-highlight-rgb: 227, 52, 47;
    --color-highlight-dark: #c51f1a;    /* Darker red */
    --color-highlight-light: #f7c6c5;   /* Light red */
    --color-on-highlight: #000000;
    
    --theme-name: 'gold';
}

/* ========================================
   THEME: RED
   ======================================== */

:root[data-theme="red"] {
    --color-primary: #e3342f;           /* Red primary */
    --color-primary-rgb: 227, 52, 47;
    --color-primary-dark: #a8261f;      /* Darker red */
    --color-primary-dark-rgb: 168, 38, 31;
    --color-primary-hover: #c51f1a;     /* Hover red */
    --color-primary-light: #f7c6c5;     /* Light red */
    --color-primary-pale: #fff2f2;      /* Pale red */
    --color-primary-text: #c51f1a;
    --color-on-primary: #000000;
    --color-on-primary-hover: #ffffff;
    --color-on-primary-dark: #ffffff;
    --color-page-gradient-start: #a8261f;
    --color-theme-preview: #b6231d;
    --color-page-gradient-end: #c51f1a;
    --color-theme-detail: #fca5a5;
    --color-action-background: #68150f;
    --color-action-background-hover: #4d0f0b;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;
    
    --color-accent: #07ad87;            /* Green accent */
    --color-accent-hover: #049960;      /* Hover green */
    --color-accent-light: #c7eed8;      /* Light green */
    --color-on-accent: #000000;
    --color-on-accent-hover: #000000;
    
    --color-highlight: #F8BB2B;         /* Gold highlight */
    --color-highlight-rgb: 248, 187, 43;
    --color-highlight-dark: #d4940a;    /* Darker gold */
    --color-highlight-light: #ffe924;   /* Light gold */
    --color-on-highlight: #000000;
    
    --theme-name: 'red';
}

/* ========================================
   THEME: GREEN
   ======================================== */

:root[data-theme="green"] {
    --color-primary: #07ad87;           /* Green primary */
    --color-primary-rgb: 7, 173, 135;
    --color-primary-dark: #049960;      /* Darker green */
    --color-primary-dark-rgb: 4, 153, 96;
    --color-primary-hover: #038a5c;     /* Hover green */
    --color-primary-light: #c7eed8;     /* Light green */
    --color-primary-pale: #e8f7f3;      /* Pale green */
    --color-primary-text: #026b52;
    --color-on-primary: #000000;
    --color-on-primary-hover: #000000;
    --color-on-primary-dark: #000000;
    --color-page-gradient-start: #025f45;
    --color-theme-preview: #02654c;
    --color-page-gradient-end: #026b52;
    --color-theme-detail: #6ee7b7;
    --color-action-background: #013d2d;
    --color-action-background-hover: #012b20;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;
    
    --color-accent: #3490dc;            /* Blue accent */
    --color-accent-hover: #1d68a7;      /* Hover blue */
    --color-accent-light: #cce3f6;      /* Light blue */
    --color-on-accent: #000000;
    --color-on-accent-hover: #ffffff;
    
    --color-highlight: #F8BB2B;         /* Gold highlight */
    --color-highlight-rgb: 248, 187, 43;
    --color-highlight-dark: #d4940a;    /* Darker gold */
    --color-highlight-light: #ffe924;   /* Light gold */
    --color-on-highlight: #000000;
    
    --theme-name: 'green';
}

/* ========================================
   THEME: GRAY
   ======================================== */

:root[data-theme="gray"] {
    --color-primary: #6c757d;           /* Gray primary */
    --color-primary-rgb: 108, 117, 125;
    --color-primary-dark: #495057;      /* Darker gray */
    --color-primary-dark-rgb: 73, 80, 87;
    --color-primary-hover: #545b62;     /* Hover gray */
    --color-primary-light: #e9ecef;     /* Light gray */
    --color-primary-pale: #f8f9fa;      /* Pale gray */
    --color-primary-text: #545b62;
    --color-on-primary: #ffffff;
    --color-on-primary-hover: #ffffff;
    --color-on-primary-dark: #ffffff;
    --color-page-gradient-start: #495057;
    --color-theme-preview: #4f565d;
    --color-page-gradient-end: #545b62;
    --color-theme-detail: #cbd5e1;
    --color-action-background: #2f3438;
    --color-action-background-hover: #202428;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;
    
    --color-accent: #3490dc;            /* Blue accent */
    --color-accent-hover: #1d68a7;      /* Hover blue */
    --color-accent-light: #cce3f6;      /* Light blue */
    --color-on-accent: #000000;
    --color-on-accent-hover: #ffffff;
    
    --color-highlight: #F8BB2B;         /* Gold highlight */
    --color-highlight-rgb: 248, 187, 43;
    --color-highlight-dark: #d4940a;    /* Darker gold */
    --color-highlight-light: #ffe924;   /* Light gold */
    --color-on-highlight: #000000;
    
    --theme-name: 'gray';
}

/* ========================================
   THEME: INDIGO (legacy alias: violet)
   ======================================== */

:root[data-theme="indigo"],
:root[data-theme="violet"] {
    --color-primary: #4f46e5;
    --color-primary-rgb: 79, 70, 229;
    --color-primary-dark: #3730a3;
    --color-primary-dark-rgb: 55, 48, 163;
    --color-primary-hover: #4338ca;
    --color-primary-light: #c7d2fe;
    --color-primary-pale: #eef2ff;
    --color-primary-text: #4338ca;
    --color-on-primary: #ffffff;
    --color-on-primary-hover: #ffffff;
    --color-on-primary-dark: #ffffff;
    --color-page-gradient-start: #312e81;
    --color-theme-preview: #3a33a6;
    --color-page-gradient-end: #4338ca;
    --color-theme-detail: #a5b4fc;
    --color-action-background: #1e1b4b;
    --color-action-background-hover: #11103a;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;

    --color-secondary: #f59e0b;
    --color-secondary-rgb: 245, 158, 11;
    --color-secondary-dark: #b45309;
    --color-secondary-light: #fef3c7;
    --color-on-secondary: #000000;
    --color-on-secondary-hover: #ffffff;
    --color-on-secondary-dark: #ffffff;

    --color-accent: #f59e0b;
    --color-accent-hover: #d97706;
    --color-accent-light: #fef3c7;
    --color-on-accent: #000000;
    --color-on-accent-hover: #000000;

    --color-highlight: #f59e0b;
    --color-highlight-rgb: 245, 158, 11;
    --color-highlight-dark: #d97706;
    --color-highlight-light: #fde68a;
    --color-highlight-pale: #fef3c7;
    --color-on-highlight: #000000;

    --theme-name: 'indigo';
}

/* ========================================
   THEME: AMBER
   Primary supplied by ISO palette: #f59e0b
   ======================================== */

:root[data-theme="amber"] {
    --color-primary: #f59e0b;
    --color-primary-rgb: 245, 158, 11;
    --color-primary-dark: #b45309;
    --color-primary-dark-rgb: 180, 83, 9;
    --color-primary-hover: #d97706;
    --color-primary-light: #fde68a;
    --color-primary-pale: #fffbeb;
    --color-primary-text: #92400e;
    --color-on-primary: #000000;
    --color-on-primary-hover: #000000;
    --color-on-primary-dark: #ffffff;
    --color-page-gradient-start: #78350f;
    --color-theme-preview: #853b0f;
    --color-page-gradient-end: #92400e;
    --color-theme-detail: #fdba74;
    --color-action-background: #4b1d07;
    --color-action-background-hover: #351304;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;

    --color-secondary: #7c3aed;
    --color-secondary-rgb: 124, 58, 237;
    --color-secondary-dark: #5b21b6;
    --color-secondary-light: #ddd6fe;
    --color-on-secondary: #ffffff;
    --color-on-secondary-hover: #ffffff;
    --color-on-secondary-dark: #ffffff;

    --color-accent: #7c3aed;
    --color-accent-hover: #6d28d9;
    --color-accent-light: #ddd6fe;
    --color-on-accent: #ffffff;
    --color-on-accent-hover: #ffffff;

    --color-highlight: #7c3aed;
    --color-highlight-rgb: 124, 58, 237;
    --color-highlight-dark: #5b21b6;
    --color-highlight-light: #ddd6fe;
    --color-highlight-pale: #f5f3ff;
    --color-on-highlight: #ffffff;

    --theme-name: 'amber';
}

/* ========================================
   THEME: PLUM (legacy alias: purple)
   ======================================== */

:root[data-theme="plum"],
:root[data-theme="purple"] {
    --color-primary: #a21caf;
    --color-primary-rgb: 162, 28, 175;
    --color-primary-dark: #701a75;
    --color-primary-dark-rgb: 112, 26, 117;
    --color-primary-hover: #86198f;
    --color-primary-light: #f0abfc;
    --color-primary-pale: #fdf4ff;
    --color-primary-text: #86198f;
    --color-on-primary: #ffffff;
    --color-on-primary-hover: #ffffff;
    --color-on-primary-dark: #ffffff;
    --color-page-gradient-start: #701a75;
    --color-theme-preview: #7b1a82;
    --color-page-gradient-end: #86198f;
    --color-theme-detail: #f0abfc;
    --color-action-background: #4a044e;
    --color-action-background-hover: #350238;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;

    --color-secondary: #0098a3;
    --color-secondary-rgb: 0, 152, 163;
    --color-secondary-dark: #00666e;
    --color-secondary-light: #b8eef1;
    --color-on-secondary: #000000;
    --color-on-secondary-hover: #ffffff;
    --color-on-secondary-dark: #ffffff;

    --color-accent: #0098a3;
    --color-accent-hover: #007f88;
    --color-accent-light: #b8eef1;
    --color-on-accent: #000000;
    --color-on-accent-hover: #ffffff;

    --color-highlight: #f5e000;
    --color-highlight-rgb: 245, 224, 0;
    --color-highlight-dark: #a89700;
    --color-highlight-light: #fff27a;
    --color-highlight-pale: #fffde6;
    --color-on-highlight: #000000;

    --theme-name: 'plum';
}

/* ========================================
   THEME: TEAL
   Primary supplied by ISO palette: #0098a3
   ======================================== */

:root[data-theme="teal"] {
    --color-primary: #0098a3;
    --color-primary-rgb: 0, 152, 163;
    --color-primary-dark: #00666e;
    --color-primary-dark-rgb: 0, 102, 110;
    --color-primary-hover: #007f88;
    --color-primary-light: #b8eef1;
    --color-primary-pale: #ecfeff;
    --color-primary-text: #00666e;
    --color-on-primary: #000000;
    --color-on-primary-hover: #ffffff;
    --color-on-primary-dark: #ffffff;
    --color-page-gradient-start: #004f56;
    --color-theme-preview: #005b62;
    --color-page-gradient-end: #00666e;
    --color-theme-detail: #67e8f9;
    --color-action-background: #00343a;
    --color-action-background-hover: #002428;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;

    --color-secondary: #7c3aed;
    --color-secondary-rgb: 124, 58, 237;
    --color-secondary-dark: #5b21b6;
    --color-secondary-light: #ddd6fe;
    --color-on-secondary: #ffffff;
    --color-on-secondary-hover: #ffffff;
    --color-on-secondary-dark: #ffffff;

    --color-accent: #f59e0b;
    --color-accent-hover: #d97706;
    --color-accent-light: #fef3c7;
    --color-on-accent: #000000;
    --color-on-accent-hover: #000000;

    --color-highlight: #f59e0b;
    --color-highlight-rgb: 245, 158, 11;
    --color-highlight-dark: #d97706;
    --color-highlight-light: #fde68a;
    --color-highlight-pale: #fef3c7;
    --color-on-highlight: #000000;

    --theme-name: 'teal';
}

/* ========================================
   THEME: OLIVE (legacy alias: lemon)
   ======================================== */

:root[data-theme="olive"],
:root[data-theme="lemon"] {
    --color-primary: #f5e000;
    --color-primary-rgb: 245, 224, 0;
    --color-primary-dark: #a89700;
    --color-primary-dark-rgb: 168, 151, 0;
    --color-primary-hover: #d8c600;
    --color-primary-light: #fff27a;
    --color-primary-pale: #fffde6;
    --color-primary-text: #6b6100;
    --color-on-primary: #000000;
    --color-on-primary-hover: #000000;
    --color-on-primary-dark: #000000;
    --color-page-gradient-start: #554d00;
    --color-theme-preview: #5e5500;
    --color-page-gradient-end: #665c00;
    --color-theme-detail: #fef08a;
    --color-action-background: #352f00;
    --color-action-background-hover: #252100;
    --color-on-action: #ffffff;
    --color-on-action-hover: #ffffff;

    --color-secondary: #7c3aed;
    --color-secondary-rgb: 124, 58, 237;
    --color-secondary-dark: #5b21b6;
    --color-secondary-light: #ddd6fe;
    --color-on-secondary: #ffffff;
    --color-on-secondary-hover: #ffffff;
    --color-on-secondary-dark: #ffffff;

    --color-accent: #7c3aed;
    --color-accent-hover: #6d28d9;
    --color-accent-light: #ddd6fe;
    --color-on-accent: #ffffff;
    --color-on-accent-hover: #ffffff;

    --color-highlight: #7c3aed;
    --color-highlight-rgb: 124, 58, 237;
    --color-highlight-dark: #5b21b6;
    --color-highlight-light: #ddd6fe;
    --color-highlight-pale: #f5f3ff;
    --color-on-highlight: #ffffff;

    --theme-name: 'olive';
}

/* ========================================
   THEME: CUSTOM
   Derive a distinct CTA surface from the ISO-selected primary color.
   ======================================== */

:root[data-theme="custom"] {
    /* Safe fallback for browsers without color-mix(). */
    --color-action-background: var(--color-primary);
    --color-action-background-hover: var(--color-primary);
}

@supports (color: color-mix(in srgb, black, white)) {
    :root[data-theme="custom"] {
        --color-action-background: color-mix(in srgb, var(--color-primary) 70%, black);
        --color-action-background-hover: color-mix(in srgb, var(--color-primary) 76%, black);
    }
}

/* Secondary action: a light outline derived from the rendered page color. */
:root {
    --color-previous-outline: var(--color-text-light);
    --color-previous-hover-background: rgba(255, 255, 255, 0.14);
    --color-checkbox-checked-border: var(--color-previous-outline);
}

@supports (color: color-mix(in srgb, black, white)) {
    :root {
        --color-previous-outline: color-mix(in srgb, var(--color-theme-preview) 30%, white);
        --color-previous-hover-background: color-mix(in srgb, var(--color-previous-outline) 18%, transparent);
        --color-checkbox-checked-border: color-mix(in srgb, var(--color-previous-outline) 82%, var(--color-theme-preview));
    }
}

/* ========================================
   BOOTSTRAP 4/5 THEME OVERRIDES
   ======================================== */

.btn-primary {
    color: var(--color-on-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover {
    color: var(--color-on-primary-hover) !important;
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-check:focus + .btn-primary {
    color: var(--color-on-primary-hover) !important;
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.5) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    color: var(--color-on-primary-dark) !important;
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.5) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--color-on-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    opacity: 0.65;
}

.btn-secondary {
    color: var(--color-on-secondary) !important;
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-secondary:hover {
    color: var(--color-on-secondary-hover) !important;
    background-color: var(--color-secondary-dark) !important;
    border-color: var(--color-secondary-dark) !important;
}

.btn-secondary:focus,
.btn-secondary.focus,
.btn-check:focus + .btn-secondary {
    color: var(--color-on-secondary-hover) !important;
    background-color: var(--color-secondary-dark) !important;
    border-color: var(--color-secondary-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-secondary-rgb), 0.5) !important;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle,
.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary {
    color: var(--color-on-secondary-dark) !important;
    background-color: var(--color-secondary-dark) !important;
    border-color: var(--color-secondary-dark) !important;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus,
.btn-check:checked + .btn-secondary:focus,
.btn-check:active + .btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-secondary-rgb), 0.5) !important;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    color: var(--color-on-secondary) !important;
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    opacity: 0.65;
}

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

a.text-primary:hover,
a.text-primary:focus {
    color: var(--color-primary-text) !important;
}

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

a.text-danger:hover,
a.text-danger:focus {
    color: var(--color-danger-text) !important;
}

.text-white {
    color: var(--color-text-light) !important;
}

.alert-success {
    color: var(--color-success-text) !important;
    background-color: var(--color-success-light) !important;
    border-color: var(--color-success) !important;
}

.alert-success .alert-link {
    color: var(--color-success-text) !important;
}

.alert-danger {
    color: var(--color-danger-text) !important;
    background-color: var(--color-danger-light) !important;
    border-color: var(--color-danger) !important;
}

.alert-danger .alert-link {
    color: var(--color-danger-text) !important;
}

/* ========================================
   SHARED NAVIGATION
   ======================================== */

.shared-navigation {
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    min-height: 86px;
    background: var(--color-bg-surface-muted) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    z-index: 1030 !important;
}

.shared-navigation-spacer {
    display: block;
    width: 100%;
    height: 86px;
}

.shared-navigation .shared-navigation__brand {
    display: block !important;
    flex: 0 1 250px;
    width: 250px !important;
    max-width: 250px !important;
    margin: 0 !important;
    text-align: left !important;
}

.shared-navigation .shared-navigation__brand img {
    display: block !important;
    width: 250px !important;
    max-width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
}

.shared-navigation__actions {
    gap: 16px;
}

.shared-navigation__phone,
.shared-navigation__phone a {
    display: flex;
    align-items: center;
}

.shared-navigation__phone a {
    color: var(--color-text-secondary) !important;
    font-size: 15px;
    text-decoration: none !important;
}

.shared-navigation__phone a:hover,
.shared-navigation__phone a:focus {
    color: var(--color-primary-text) !important;
}

.shared-navigation__phone-icon {
    flex-shrink: 0;
    margin-right: 5px;
}

.shared-navigation .shared-navigation__language {
    padding: 6px 10px !important;
    background: var(--color-action-background) !important;
    border: 1px solid var(--color-action-border) !important;
    border-radius: 8px !important;
    color: var(--color-on-action) !important;
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.shared-navigation .shared-navigation__language:hover,
.shared-navigation .shared-navigation__language:focus {
    background: var(--color-action-background-hover) !important;
    border-color: var(--color-action-border-hover) !important;
    color: var(--color-on-action-hover) !important;
}

@media screen and (max-width: 767px) {
    .shared-navigation .shared-navigation__brand {
        flex-basis: 225px;
        width: 225px !important;
        max-width: 225px !important;
    }

    .shared-navigation .shared-navigation__brand img {
        width: 225px !important;
    }
}

@media screen and (max-width: 400px) {
    .shared-navigation {
        min-height: 76px;
    }

    .shared-navigation-spacer {
        height: 76px;
    }

    .shared-navigation .shared-navigation__brand {
        flex-basis: 180px;
        width: 180px !important;
        max-width: 180px !important;
    }

    .shared-navigation .shared-navigation__brand img {
        width: 180px !important;
        height: auto !important;
    }

    .shared-navigation__actions {
        gap: 8px;
    }
}

/* ========================================
   RESPONSIVE & SPECIAL STATES
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: more) {
    :root {
        --color-text-muted: #515151;
        --color-border-light: #a6a6a6;
    }
}

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

/* A two-color focus indicator stays visible on both light and dark theme surfaces. */
:root :focus-visible {
    outline: 3px solid var(--color-text-light) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px var(--color-black) !important;
}