/*
 * MB Listing color system. Edit this file to recolor the whole application.
 * 1. Brand and neutral palette: the main controls for your theme.
 * 2. Semantic tokens: surfaces, text, forms, buttons, footer and states.
 * 3. Dark mode: overrides the same semantic tokens.
 * Legacy orange/blue names remain aliases so existing screens keep working.
 * Uploaded banners, photos, map tiles and provider logos retain their colors.
 */
:root {
    /* BRAND: change these together for a different accent. */
    --mb-primary: #cc0000;
    --mb-primary-hover: #a30000;
    --mb-primary-soft: #fff1f1;
    --mb-primary-border: var(--mb-primary);
    --mb-on-primary: #FFFFFF;
    --mb-primary-rgb: 204, 0, 0;

    /* NEUTRALS: white reading surfaces and high-contrast black/gray details. */
    --mb-white: #FFFFFF;
    --mb-slate-50: #FAFAFA;
    --mb-slate-100: #F0F0F0;
    --mb-slate-200: #737373;
    --mb-slate-300: #404040;
    --mb-slate-400: #737373;
    --mb-slate-500: #404040;
    --mb-slate-600: #303030;
    --mb-slate-700: #111111;
    --mb-slate-800: #111111;
    --mb-slate-900: #000000;
    --mb-ink-rgb: 17, 17, 17;
    --mb-page-rgb: 250, 250, 250;
    --mb-night-rgb: 17, 17, 17;
    --mb-white-rgb: 255, 255, 255;

    /* MEANING: retain distinct success, error and warning colors. */
    --mb-green: #14532D;
    --mb-green-tint: var(--mb-white);
    --mb-green-border: var(--mb-green);
    --mb-red: #991B1B;
    --mb-red-tint: var(--mb-white);
    --mb-red-border: var(--mb-red);
    --mb-amber: #784400;
    --mb-amber-text: #613D00;
    --mb-amber-tint: var(--mb-white);
    --mb-amber-border: var(--mb-amber);
    --mb-purple: var(--mb-accent);
    --mb-purple-tint: var(--mb-paper);
    --mb-teal: var(--mb-accent);
    --mb-teal-tint: var(--mb-paper);

    /* Palette variants for charts and legacy decorative tiles. */
    --mb-blue-50: var(--mb-primary-soft);
    --mb-blue-100: var(--mb-line);
    --mb-blue-200: var(--mb-primary-border);
    --mb-blue-300: var(--mb-accent);
    --mb-blue-400: var(--mb-accent);
    --mb-blue-500: var(--mb-accent);
    --mb-blue-600: var(--mb-primary);
    --mb-blue-700: var(--mb-primary-hover);
    --mb-blue-800: var(--mb-slate-700);
    --mb-blue-900: var(--mb-slate-800);
    --mb-chart-orange: #784400;
    --mb-chart-sky: #404040;
    --mb-scrim: #000000;
    --od-c-imp: var(--mb-accent);
    --od-c-clk: var(--mb-chart-orange);
    --od-c-3: var(--mb-green);
    --od-c-4: var(--mb-amber);
    --od-c-5: var(--mb-chart-sky);

    /* DARK PALETTE: shared by explicit dark mode and native admin auto mode. */
    --mb-dark-page: #000000;
    --mb-dark-paper: #111111;
    --mb-dark-paper-alt: #1C1C1C;
    --mb-dark-ink: #FFFFFF;
    --mb-dark-muted: #D4D4D4;
    --mb-dark-line: #858585;
    --mb-dark-line-strong: #BDBDBD;
    --mb-dark-accent: #FFFFFF;
    --mb-dark-accent-hover: #FFFFFF;
    --mb-dark-accent-soft: #111111;
    --mb-dark-header-bg: #111111;
    --mb-dark-header-line: #858585;
    --mb-dark-green: #9FEBB0;
    --mb-dark-green-tint: #111111;
    --mb-dark-red: #FFB4B4;
    --mb-dark-red-tint: #111111;
    --mb-dark-amber: #F5D071;
    --mb-dark-amber-text: #F5D071;
    --mb-dark-amber-tint: #111111;
    --mb-dark-ink-rgb: 255, 255, 255;
    --mb-dark-page-rgb: 0, 0, 0;
    --mb-dark-success-rgb: 159, 235, 176;
    --mb-dark-danger-rgb: 255, 180, 180;
    --mb-dark-light-rgb: 28, 28, 28;
    --mb-dark-link-color-rgb: 255, 255, 255;
    --mb-dark-link-hover-color-rgb: 255, 255, 255;

    /* Provider identity colors, kept separate from the site brand. */
    --mb-google-text: #1F1F1F;
    --mb-google-border: #747775;
    --mb-google-hover: #E3E3E3;
    --mb-facebook: #1877F2;
    --mb-twitter: #00ACEE;
    --mb-instagram: #E1306C;
    --mb-dribbble: #EA4C89;
    --mb-whatsapp: #075E54;
}

:root,
[data-bs-theme=light],
html[data-theme=light],
html[data-theme=auto] {
    color-scheme: light;
    /* Main surfaces and text. */
    --mb-page: var(--mb-slate-50);
    --mb-paper: var(--mb-white);
    --mb-paper-alt: var(--mb-slate-100);
    --mb-ink: var(--mb-slate-800);
    --mb-muted: var(--mb-slate-500);
    --mb-line: var(--mb-slate-200);
    --mb-line-strong: var(--mb-slate-300);
    --mb-accent: var(--mb-primary);
    --mb-accent-hover: var(--mb-primary-hover);
    --mb-accent-soft: var(--mb-primary-soft);

    /* Shell: crisp white chrome, black labels, one solid cobalt accent. */
    --mb-header-bg: var(--mb-paper);
    --mb-header-ink: var(--mb-ink);
    --mb-header-muted: var(--mb-muted);
    --mb-header-line: var(--mb-line);
    --mb-header-accent: var(--mb-primary);
    --mb-header-accent-hover: var(--mb-primary-hover);
    --mb-header-on-accent: var(--mb-on-primary);
    --mb-footer-bg: var(--mb-paper);
    --mb-footer-ink: var(--mb-ink);
    --mb-footer-muted: var(--mb-muted);
    --mb-footer-line: var(--mb-line-strong);
    --mb-night: var(--mb-slate-700);
    --mb-night-2: var(--mb-slate-800);
    --mb-on-dark: var(--mb-white);
    --mb-on-dark-muted: var(--mb-white);
    --mb-dark-line: #858585;
    --mb-accent-on-dark: var(--mb-white);

    /* Buttons and forms. */
    --mb-button-bg: var(--mb-primary);
    --mb-button-hover: var(--mb-primary-hover);
    --mb-button-text: var(--mb-on-primary);
    --mb-button-border: var(--mb-primary);
    --mb-button-hover-border: var(--mb-button-hover);
    --mb-button-disabled-bg: var(--mb-paper-alt);
    --mb-button-disabled-text: var(--mb-muted);
    --mb-selection-bg: var(--mb-primary);
    --mb-selection-text: var(--mb-on-primary);
    --mb-input-bg: var(--mb-paper);
    --mb-input-border: var(--mb-slate-400);
    --mb-input-hover-border: var(--mb-ink);
    --mb-input-disabled-bg: var(--mb-paper-alt);
    --mb-search-band-bg: var(--mb-page);
    --mb-map-land: var(--mb-page);
    --mb-map-label: var(--mb-muted);
    --mb-map-road: var(--mb-paper);
    --mb-map-arterial: var(--mb-paper-alt);
    --mb-map-highway: var(--mb-line);
    --mb-map-boundary: var(--mb-line-strong);
    --mb-map-water: var(--mb-paper-alt);
    --mb-focus-color: var(--mb-primary);
    --mb-focus: 0 0 0 2px var(--mb-focus-color);
    --mb-shadow-float: 0 12px 40px color-mix(in srgb, var(--mb-scrim) 9%, transparent), 0 2px 6px color-mix(in srgb, var(--mb-scrim) 5%, transparent);
    --mb-shadow-button: 0 2px 5px color-mix(in srgb, var(--mb-primary) 13%, transparent);

    /* Existing component names follow the same theme. */
    --mb-orange: var(--mb-primary);
    --mb-orange-hover: var(--mb-primary-hover);
    --mb-button-orange: var(--mb-button-bg);
    --mb-button-orange-hover: var(--mb-button-hover);
    --mb-orange-tint: var(--mb-primary-soft);
    --mb-on-orange: var(--mb-on-primary);
    --mb-blue: var(--mb-accent);
    --mb-blue-hover: var(--mb-accent-hover);
    --mb-blue-tint: var(--mb-accent-soft);
    --mb-tile-1: var(--mb-primary);
    --mb-tile-2: var(--mb-primary);
    --mb-tile-3: var(--mb-primary);
    --mb-tile-4: var(--mb-primary);
    --mb-tile-5: var(--mb-primary);
    --mb-tile-text: var(--mb-white);
    --mb-hero-glow: none;
    --mb-promo-glow: none;

    /* Bootstrap utilities and native Django administration. */
    --bs-blue: var(--mb-primary);
    --bs-white: var(--mb-white);
    --bs-white-rgb: var(--mb-white-rgb);
    --bs-primary: var(--mb-primary);
    --bs-primary-rgb: var(--mb-primary-rgb);
    --bs-primary-text-emphasis: var(--mb-accent);
    --bs-primary-bg-subtle: var(--mb-primary-soft);
    --bs-success: var(--mb-green);
    --bs-success-rgb: 20, 83, 45;
    --bs-danger: var(--mb-red);
    --bs-danger-rgb: 153, 27, 27;
    --bs-warning: var(--mb-amber);
    --bs-warning-rgb: 120, 68, 0;
    --bs-secondary: var(--mb-slate-600);
    --bs-secondary-rgb: 48, 48, 48;
    --bs-info: var(--mb-blue-500);
    --bs-info-rgb: var(--mb-primary-rgb);
    --bs-success-text-emphasis: var(--mb-green);
    --bs-success-bg-subtle: var(--mb-green-tint);
    --bs-success-border-subtle: var(--mb-green-border);
    --bs-danger-text-emphasis: var(--mb-red);
    --bs-danger-bg-subtle: var(--mb-red-tint);
    --bs-danger-border-subtle: var(--mb-red-border);
    --bs-warning-text-emphasis: var(--mb-amber-text);
    --bs-warning-bg-subtle: var(--mb-amber-tint);
    --bs-warning-border-subtle: var(--mb-amber-border);
    --bs-info-text-emphasis: var(--mb-accent);
    --bs-info-bg-subtle: var(--mb-accent-soft);
    --bs-info-border-subtle: var(--mb-primary-border);
    --bs-secondary-bg-subtle: var(--mb-paper-alt);
    --bs-secondary-border-subtle: var(--mb-line);
    --bs-light: var(--mb-page);
    --bs-light-rgb: var(--mb-page-rgb);
    --bs-dark-rgb: var(--mb-night-rgb);
    --bs-body-color: var(--mb-ink);
    --bs-body-color-rgb: var(--mb-ink-rgb);
    --bs-body-bg: var(--mb-page);
    --bs-secondary-color: var(--mb-muted);
    --bs-emphasis-color: var(--mb-ink);
    --bs-heading-color: var(--mb-ink);
    --bs-border-color: var(--mb-line);
    --bs-link-color: var(--mb-accent);
    --bs-link-color-rgb: var(--mb-primary-rgb);
    --bs-link-hover-color: var(--mb-accent-hover);
    --bs-link-hover-color-rgb: 17, 17, 17;
    --bs-focus-ring-color: var(--mb-focus-color);
    --footer-bg-color: var(--mb-footer-bg);
    --bs-gradient: none;

    --primary: var(--mb-primary);
    --secondary: var(--mb-header-bg);
    --accent: var(--mb-primary-hover);
    --primary-fg: var(--mb-on-primary);
    --body-fg: var(--mb-ink);
    --body-bg: var(--mb-page);
    --body-quiet-color: var(--mb-muted);
    --body-loud-color: var(--mb-ink);
    --header-color: var(--mb-header-ink);
    --header-branding-color: var(--mb-header-ink);
    --header-bg: var(--mb-header-bg);
    --header-link-color: var(--mb-header-ink);
    --breadcrumbs-fg: var(--mb-header-muted);
    --breadcrumbs-link-fg: var(--mb-header-ink);
    --breadcrumbs-bg: var(--mb-header-bg);
    --link-fg: var(--mb-accent);
    --link-hover-color: var(--mb-accent-hover);
    --link-selected-fg: var(--mb-accent-hover);
    --hairline-color: var(--mb-line);
    --border-color: var(--mb-line-strong);
    --darkened-bg: var(--mb-paper-alt);
    --selected-bg: var(--mb-paper-alt);
    --selected-row: var(--mb-paper-alt);
    --button-fg: var(--mb-button-text);
    --button-bg: var(--mb-button-bg);
    --button-hover-bg: var(--mb-button-hover);
    --default-button-bg: var(--mb-button-bg);
    --default-button-hover-bg: var(--mb-button-hover);
}

[data-bs-theme=dark], html[data-theme=dark] {
    color-scheme: dark;
    --mb-page: var(--mb-dark-page);
    --mb-paper: var(--mb-dark-paper);
    --mb-paper-alt: var(--mb-dark-paper-alt);
    --mb-ink: var(--mb-dark-ink);
    --mb-muted: var(--mb-dark-muted);
    --mb-line: var(--mb-dark-line);
    --mb-line-strong: var(--mb-dark-line-strong);
    --mb-accent: var(--mb-dark-accent);
    --mb-accent-hover: var(--mb-dark-accent-hover);
    --mb-accent-soft: var(--mb-dark-accent-soft);
    --mb-header-bg: var(--mb-dark-header-bg);
    --mb-header-line: var(--mb-dark-header-line);
    --mb-footer-bg: var(--mb-dark-header-bg);
    --mb-primary-soft: var(--mb-dark-accent-soft);
    --mb-primary-border: var(--mb-dark-accent);
    --mb-button-border: var(--mb-dark-ink);
    --mb-button-hover-border: var(--mb-dark-ink);
    --mb-input-border: var(--mb-dark-line);
    --mb-chart-orange: var(--mb-dark-red);
    --mb-chart-sky: var(--mb-dark-muted);
    --mb-green: var(--mb-dark-green);
    --mb-green-tint: var(--mb-dark-green-tint);
    --mb-red: var(--mb-dark-red);
    --mb-red-tint: var(--mb-dark-red-tint);
    --mb-amber: var(--mb-dark-amber);
    --mb-amber-text: var(--mb-dark-amber-text);
    --mb-amber-tint: var(--mb-dark-amber-tint);
    --mb-focus-color: var(--mb-dark-accent);
    --mb-ink-rgb: var(--mb-dark-ink-rgb);
    --mb-page-rgb: var(--mb-dark-page-rgb);
    --bs-success-rgb: var(--mb-dark-success-rgb);
    --bs-danger-rgb: var(--mb-dark-danger-rgb);
    --bs-light: var(--mb-paper-alt);
    --bs-light-rgb: var(--mb-dark-light-rgb);
    --bs-dark-rgb: var(--mb-ink-rgb);
    --bs-link-color-rgb: var(--mb-dark-link-color-rgb);
    --bs-link-hover-color-rgb: var(--mb-dark-link-hover-color-rgb);
}

/* Native Django admin also honors its automatic system theme. */
@media (prefers-color-scheme: dark) {
    html[data-theme=auto] {
    color-scheme: dark;
    --mb-page: var(--mb-dark-page);
    --mb-paper: var(--mb-dark-paper);
    --mb-paper-alt: var(--mb-dark-paper-alt);
    --mb-ink: var(--mb-dark-ink);
    --mb-muted: var(--mb-dark-muted);
    --mb-line: var(--mb-dark-line);
    --mb-line-strong: var(--mb-dark-line-strong);
    --mb-accent: var(--mb-dark-accent);
    --mb-accent-hover: var(--mb-dark-accent-hover);
    --mb-accent-soft: var(--mb-dark-accent-soft);
    --mb-header-bg: var(--mb-dark-header-bg);
    --mb-header-line: var(--mb-dark-header-line);
    --mb-footer-bg: var(--mb-dark-header-bg);
    --mb-primary-soft: var(--mb-dark-accent-soft);
    --mb-primary-border: var(--mb-dark-accent);
    --mb-button-border: var(--mb-dark-ink);
    --mb-button-hover-border: var(--mb-dark-ink);
    --mb-input-border: var(--mb-dark-line);
    --mb-chart-orange: var(--mb-dark-red);
    --mb-chart-sky: var(--mb-dark-muted);
    --mb-green: var(--mb-dark-green);
    --mb-green-tint: var(--mb-dark-green-tint);
    --mb-red: var(--mb-dark-red);
    --mb-red-tint: var(--mb-dark-red-tint);
    --mb-amber: var(--mb-dark-amber);
    --mb-amber-text: var(--mb-dark-amber-text);
    --mb-amber-tint: var(--mb-dark-amber-tint);
    --mb-focus-color: var(--mb-dark-accent);
    --mb-ink-rgb: var(--mb-dark-ink-rgb);
    --mb-page-rgb: var(--mb-dark-page-rgb);
    --bs-success-rgb: var(--mb-dark-success-rgb);
    --bs-danger-rgb: var(--mb-dark-danger-rgb);
    --bs-light: var(--mb-paper-alt);
    --bs-light-rgb: var(--mb-dark-light-rgb);
    --bs-dark-rgb: var(--mb-ink-rgb);
    --bs-link-color-rgb: var(--mb-dark-link-color-rgb);
    --bs-link-hover-color-rgb: var(--mb-dark-link-hover-color-rgb);
    }
}