/* ==========================================================================
   BM Directory Design Tokens
   Single source of truth for styles across Bricks Builder & custom CSS.
   Breakpoints:
   - Mobile:  375px (min / default)
   - Tablet:  768px
   - Desktop: 1280px
   ========================================================================== */

:root {
  color-scheme: light;
  /* ------------------------------------------------------------------------
     1. Brand & Theme Colors (Easily swappable in one place)
     ------------------------------------------------------------------------ */
  /* Brand: Deep Rainforest / Borneo Trust Green */
  --bm-color-brand-light: #15803d;
  --bm-color-brand-base: #166534;
  --bm-color-brand-dark: #14532d;
  --bm-color-brand-tint: rgba(22, 101, 52, 0.08);

  /* Accent: Warm Borneo Sun / Ochre Amber */
  --bm-color-accent-light: #f59e0b;
  --bm-color-accent-base: #d97706;
  --bm-color-accent-dark: #b45309;
  --bm-color-accent-tint: rgba(217, 119, 6, 0.1);
  --bm-color-on-accent: #0f172a; /* text on accent-base; does not flip in dark mode (ink-dark does): 5.9:1 on #d97706 */

  /* Ink / Text */
  --bm-color-ink-light: #475569;
  --bm-color-ink-base: #1e293b;
  --bm-color-ink-dark: #0f172a;

  /* Muted Text / Icons */
  --bm-color-muted-light: #94a3b8;
  --bm-color-muted-base: #64748b;
  --bm-color-muted-dark: #475569;

  /* Line / Dividers / Borders */
  --bm-color-line-light: #f1f5f9;
  --bm-color-line-base: #e2e8f0;
  --bm-color-line-dark: #cbd5e1;

  /* Surface / Backgrounds (Calm, structured contrast) */
  --bm-color-surface-light: #ffffff;
  --bm-color-surface-base: #f8fafc;
  --bm-color-surface-dark: #f1f5f9;
  --bm-color-surface-muted: #f8fafc;

  /* Success (e.g. Verified badge, Open status) */
  --bm-color-success-light: #22c55e;
  --bm-color-success-base: #16a34a;
  --bm-color-success-dark: #15803d;
  --bm-color-success-tint: rgba(22, 163, 74, 0.1);

  /* Danger / Urgent (e.g. Closed, Price alerts, Errors) */
  --bm-color-danger-light: #ef4444;
  --bm-color-danger-base: #dc2626;
  --bm-color-danger-dark: #b91c1c;
  --bm-color-danger-tint: rgba(220, 38, 38, 0.1);

  /* Social / Messaging (Locality specific) */
  --bm-color-whatsapp-base: #25d366;
  --bm-color-whatsapp-dark: #1da851;
  --bm-color-whatsapp-tint: rgba(37, 211, 102, 0.12);

  /* Gradients & Patterns (Token-driven, zero stock photography) */
  --bm-gradient-hero: linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%);
  --bm-gradient-hero-accent: radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.15) 0%, transparent 45%);
  --bm-gradient-cta: linear-gradient(135deg, #14532d 0%, #166534 60%, #1e3a2f 100%);
  --bm-gradient-footer: linear-gradient(180deg, var(--bm-dk-footer-a) 0%, var(--bm-dk-footer-b) 100%);
  --bm-gradient-card-scrim: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, transparent 40%, rgba(15, 23, 42, 0.75) 100%);
  --bm-pattern-dots: radial-gradient(circle, var(--bm-color-line-dark) 1px, transparent 1px);
  --bm-pattern-size: 1rem 1rem;

  /* Dark Band & Footer Tokens */
  --bm-color-footer-bg: var(--bm-dk-base);
  --bm-color-footer-text: #e2e8f0;
  --bm-color-footer-heading: #ffffff;
  --bm-color-footer-line: rgba(255, 255, 255, 0.08);
  --bm-color-footer-link-hover: var(--bm-dk-link);

  /* Filter & Pill Tokens */
  --bm-color-chip-bg: #ffffff;
  --bm-color-chip-border: #e2e8f0;
  --bm-color-chip-active-bg: #166534;
  --bm-color-chip-active-text: #ffffff;

  /* Card Interaction Tokens */
  --bm-color-save-btn-bg: rgba(255, 255, 255, 0.9);
  --bm-color-save-btn-hover: #ffffff;
  --bm-color-scrim-dark: rgba(15, 23, 42, 0.65);

  /* Dark surfaces (the same in every theme; the dark blocks and the footer point at them). A non-green accent preset re-hues all of them in
     design/components/46-accent.css, so dark surfaces and the footer follow the accent. Do not use these for light surfaces. */
  --bm-dk-base: #091310;
  --bm-dk-card: #11221b;
  --bm-dk-raised: #162b23;
  --bm-dk-muted: #13241d;
  --bm-dk-line: #1e3a2f;
  --bm-dk-line-strong: #2d5545;
  --bm-dk-bar: #10211a;
  --bm-dk-field: #141b16;
  --bm-dk-deep: #0f1712;
  --bm-dk-footer-a: #0f1d18;
  --bm-dk-footer-b: #080f0c;
  --bm-dk-link: #34d399; /* link hover on dark surfaces, the footer included */

  /* Lighter / mid / vivid brand shades used on dark surfaces (the accent presets remap them) */
  --bm-color-brand-bright: #86efac;
  --bm-color-brand-mid: #22c55e;
  --bm-color-brand-vivid: #16a34a;

  /* Brand Contrast & On-Dark Tokens (WCAG AA/AAA compliant) */
  --bm-color-text-on-dark: #ffffff;
  --bm-color-hero-title: #ffffff;
  --bm-color-hero-subtitle: rgba(255, 255, 255, 0.92);
  --bm-color-cta-title: #ffffff;
  --bm-color-cta-desc: rgba(255, 255, 255, 0.90);
  --bm-color-cta-btn-bg: #ffffff;
  --bm-color-cta-btn-text: #14532d;
  --bm-color-cta-btn-hover-bg: #f8fafc;
  --bm-color-cta-btn-hover-text: #0f172a;
  --bm-color-btn-primary-text: #ffffff;

  /* Card Badge (Category Pill) Tokens */
  --bm-color-card-badge-bg: rgba(255, 255, 255, 0.95);
  --bm-color-card-badge-text: #0f172a;
  --bm-color-card-badge-border: rgba(226, 232, 240, 0.85);

  /* Category Tile Icon Tokens */
  --bm-color-category-icon-bg: rgba(22, 101, 52, 0.08);
  --bm-color-category-icon-color: #166534;
  --bm-color-category-icon-hover-bg: #166534;
  --bm-color-category-icon-hover-color: #ffffff;

  /* Opening Hours Tokens (WCAG AA/AAA contrast) */
  --bm-color-hours-border: var(--bm-color-line-light);
  --bm-color-hours-time: var(--bm-color-ink-dark);
  --bm-color-hours-row-today-bg: rgba(22, 101, 52, 0.08);
  --bm-color-hours-row-today-text: #14532d;
  --bm-color-hours-row-today-border: rgba(22, 101, 52, 0.25);
  --bm-color-hours-today-badge-bg: rgba(22, 101, 52, 0.12);
  --bm-color-hours-today-badge-text: #14532d;
  --bm-color-hours-today-badge-border: rgba(22, 101, 52, 0.3);

  /* Status Badges (Open/Closed operational states - WCAG AA compliant >= 4.5:1) */
  --bm-color-badge-open-bg: rgba(20, 83, 45, 0.12);
  --bm-color-badge-open-text: #14532d;
  --bm-color-badge-open-border: rgba(20, 83, 45, 0.28);
  --bm-color-badge-closed-bg: rgba(51, 65, 85, 0.1);
  --bm-color-badge-closed-text: #1e293b;
  --bm-color-badge-closed-border: rgba(51, 65, 85, 0.25);
  --bm-color-status-dot-bg: #16a34a;
  --bm-color-status-dot-ring: rgba(22, 163, 74, 0.25);

  /* ------------------------------------------------------------------------
     2. Typography Families (System font stack - zero external CDN / zero licensing)
     ------------------------------------------------------------------------ */
  --bm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* ------------------------------------------------------------------------
     3. Fluid Type Scale (clamp-based for smooth scaling without jumpy breakpoints)
     ------------------------------------------------------------------------ */
  --bm-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --bm-text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --bm-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --bm-text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --bm-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --bm-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --bm-text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.375rem);
  --bm-text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --bm-text-5xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* Font Weights */
  --bm-font-weight-regular: 400;
  --bm-font-weight-medium: 500;
  --bm-font-weight-semibold: 600;
  --bm-font-weight-bold: 700;
  --bm-font-weight-extrabold: 800;

  /* Line Heights */
  --bm-line-height-tight: 1.2;
  --bm-line-height-snug: 1.375;
  --bm-line-height-normal: 1.5;
  --bm-line-height-relaxed: 1.625;

  /* Letter Spacing */
  --bm-tracking-tight: -0.015em;
  --bm-tracking-normal: 0;
  --bm-tracking-wide: 0.04em;

  /* ------------------------------------------------------------------------
     4. Spacing Scale (rem-based on 4px rhythm)
     ------------------------------------------------------------------------ */
  --bm-space-1: 0.25rem;   /* 4px */
  --bm-space-1-5: 0.375rem; /* 6px */
  --bm-space-2: 0.5rem;    /* 8px */
  --bm-space-2-5: 0.625rem; /* 10px */
  --bm-space-3: 0.75rem;   /* 12px */
  --bm-space-4: 1rem;      /* 16px */
  --bm-space-5: 1.25rem;   /* 20px */
  --bm-space-6: 1.5rem;    /* 24px */
  --bm-space-8: 2rem;      /* 32px */
  --bm-space-10: 2.5rem;   /* 40px */
  --bm-space-12: 3rem;     /* 48px */
  --bm-space-16: 4rem;     /* 64px */
  --bm-space-20: 5rem;     /* 80px */

  /* ------------------------------------------------------------------------
     5. Radii Scale
     ------------------------------------------------------------------------ */
  --bm-radius-sm: 0.25rem;
  --bm-radius-md: 0.5rem;
  --bm-radius-lg: 0.75rem;
  --bm-radius-xl: 1rem;
  --bm-radius-2xl: 1.5rem;
  --bm-radius-3xl: 2rem;
  --bm-radius-full: 9999px;

  /* ------------------------------------------------------------------------
     6. Shadows & Elevations
     ------------------------------------------------------------------------ */
  --bm-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --bm-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --bm-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --bm-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
  --bm-shadow-card: 0 2px 8px -2px rgba(15, 23, 42, 0.06), 0 1px 4px -1px rgba(15, 23, 42, 0.04);
  --bm-shadow-card-hover: 0 12px 24px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --bm-shadow-pill: 0 2px 8px -1px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --bm-shadow-bento: 0 1px 3px rgba(15, 23, 42, 0.04), 0 10px 24px -4px rgba(15, 23, 42, 0.08);
  --bm-shadow-drawer: 0 -8px 24px -4px rgba(15, 23, 42, 0.2);
  --bm-shadow-sticky-bar: 0 -4px 16px -2px rgba(15, 23, 42, 0.1);
  --bm-shadow-focus: 0 0 0 3px rgba(22, 101, 52, 0.25);

  /* Glass / Blurred Sticky Header Tokens */
  --bm-color-header-bg: rgba(255, 255, 255, 0.82);
  --bm-color-header-border: rgba(226, 232, 240, 0.85);
  --bm-header-blur: blur(16px) saturate(180%);

  /* Bento & Signature Motif Gradients */
  --bm-gradient-bento-hero: linear-gradient(135deg, #14532d 0%, #166534 60%, #15803d 100%);
  --bm-signature-glow: radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.18) 0%, transparent 65%);

  /* Custom Select & Lightbox Tokens */
  --bm-color-select-active: rgba(22, 101, 52, 0.08);
  --bm-color-select-backdrop: rgba(15, 23, 42, 0.45);
  --bm-color-lightbox-backdrop: rgba(10, 15, 20, 0.94);
  --bm-color-lightbox-text: #ffffff;
  --bm-color-lightbox-btn-bg: rgba(255, 255, 255, 0.12);
  --bm-color-lightbox-btn-hover: rgba(255, 255, 255, 0.24);

  /* ------------------------------------------------------------------------
     7. Layout, Containers & Z-Index
     ------------------------------------------------------------------------ */
  --bm-container-max: 80rem;   /* 1280px */
  --bm-touch-target-min: 2.75rem; /* 44px */

  --bm-z-base: 1;
  --bm-z-dropdown: 50;
  --bm-z-sticky: 100;
  --bm-z-sticky-bar: 200;
  --bm-z-backdrop: 590;
  --bm-z-drawer: 600;
  --bm-z-modal: 700;
  --bm-z-lightbox: 900;

  /* ------------------------------------------------------------------------
     8. Motion & Transitions
     ------------------------------------------------------------------------ */
  --bm-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --bm-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   9. Dark Mode Tokens
   Applied when:
   - System prefers dark AND html is not forced to light (data-bm-theme != "light")
   - OR html is explicitly set to dark (data-bm-theme="dark")
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) {
    color-scheme: dark;
    --bm-color-brand-tint: rgba(74, 222, 128, 0.15);
    --bm-color-surface-base: var(--bm-dk-base);
    --bm-color-surface-light: var(--bm-dk-card);
    --bm-color-surface-dark: var(--bm-dk-raised);
    --bm-color-surface-muted: var(--bm-dk-muted);
    --bm-color-ink-base: #f1f5f9;
    --bm-color-ink-light: #cbd5e1;
    --bm-color-ink-dark: #ffffff;
    --bm-color-muted-base: #94a3b8;
    --bm-color-muted-light: #cbd5e1;
    --bm-color-muted-dark: #64748b;
    --bm-color-line-base: var(--bm-dk-line);
    --bm-color-line-light: var(--bm-dk-raised);
    --bm-color-line-dark: var(--bm-dk-line-strong);
    --bm-color-header-bg: color-mix(in srgb, var(--bm-dk-base) 85%, transparent);
    --bm-color-header-border: rgba(255, 255, 255, 0.08);
    --bm-color-chip-bg: var(--bm-dk-card);
    --bm-color-chip-border: var(--bm-dk-line);
    --bm-color-save-btn-bg: color-mix(in srgb, var(--bm-dk-card) 90%, transparent);
    --bm-color-save-btn-hover: var(--bm-dk-raised);
    --bm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --bm-shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.5);
    --bm-shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
    --bm-shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.7);
    --bm-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --bm-shadow-card-hover: 0 16px 32px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--bm-dk-link) 25%, transparent);
    --bm-color-select-active: rgba(52, 211, 153, 0.15);
    --bm-color-select-backdrop: rgba(0, 0, 0, 0.65);
    --bm-color-lightbox-backdrop: rgba(0, 0, 0, 0.96);
    --bm-color-lightbox-text: #ffffff;
    --bm-color-lightbox-btn-bg: rgba(255, 255, 255, 0.15);
    --bm-color-lightbox-btn-hover: rgba(255, 255, 255, 0.3);

    /* Brand Contrast & On-Dark Tokens (Dark Mode) */
    --bm-color-text-on-dark: #ffffff;
    --bm-color-hero-title: #ffffff;
    --bm-color-hero-subtitle: rgba(255, 255, 255, 0.95);
    --bm-color-cta-title: #ffffff;
    --bm-color-cta-desc: rgba(255, 255, 255, 0.92);
    --bm-color-cta-btn-bg: #ffffff;
    --bm-color-cta-btn-text: #14532d;
    --bm-color-cta-btn-hover-bg: #f1f5f9;
    --bm-color-cta-btn-hover-text: #0f172a;
    --bm-color-btn-primary-text: #ffffff;

    /* Card Badge (Category Pill) Tokens (Dark Mode: emerald surface, off-white text 13.6:1 contrast) */
    --bm-color-card-badge-bg: var(--bm-dk-raised);
    --bm-color-card-badge-text: #f1f5f9;
    --bm-color-card-badge-border: var(--bm-dk-line-strong);

    /* Category Tile Icon Tokens (Dark Mode: vibrant emerald, 8.6:1 contrast against var(--bm-dk-card)) */
    --bm-color-category-icon-bg: rgba(52, 211, 153, 0.15);
    --bm-color-category-icon-color: #34d399;
    --bm-color-category-icon-hover-bg: #34d399;
    --bm-color-category-icon-hover-color: var(--bm-dk-base);

    /* Opening Hours Tokens (Dark Mode - vibrant emerald, high contrast off-white times) */
    --bm-color-hours-border: var(--bm-dk-line);
    --bm-color-hours-time: #f1f5f9;
    --bm-color-hours-row-today-bg: rgba(52, 211, 153, 0.14);
    --bm-color-hours-row-today-text: #4ade80;
    --bm-color-hours-row-today-border: var(--bm-dk-line-strong);
    --bm-color-hours-today-badge-bg: rgba(52, 211, 153, 0.22);
    --bm-color-hours-today-badge-text: #4ade80;
    --bm-color-hours-today-badge-border: #34d399;

    /* Status Badges (Dark Mode - high contrast emerald / slate) */
    --bm-color-badge-open-bg: rgba(52, 211, 153, 0.18);
    --bm-color-badge-open-text: #4ade80;
    --bm-color-badge-open-border: rgba(74, 222, 128, 0.35);
    --bm-color-badge-closed-bg: rgba(148, 163, 184, 0.15);
    --bm-color-badge-closed-text: #cbd5e1;
    --bm-color-badge-closed-border: rgba(203, 213, 225, 0.3);
    --bm-color-status-dot-bg: #4ade80;
    --bm-color-status-dot-ring: rgba(74, 222, 128, 0.35);
  }
}

:root[data-bm-theme="dark"] {
  color-scheme: dark;
  --bm-color-brand-tint: rgba(74, 222, 128, 0.15);
  --bm-color-surface-base: var(--bm-dk-base);
  --bm-color-surface-light: var(--bm-dk-card);
  --bm-color-surface-dark: var(--bm-dk-raised);
  --bm-color-surface-muted: var(--bm-dk-muted);
  --bm-color-ink-base: #f1f5f9;
  --bm-color-ink-light: #cbd5e1;
  --bm-color-ink-dark: #ffffff;
  --bm-color-muted-base: #94a3b8;
  --bm-color-muted-light: #cbd5e1;
  --bm-color-muted-dark: #64748b;
  --bm-color-line-base: var(--bm-dk-line);
  --bm-color-line-light: var(--bm-dk-raised);
  --bm-color-line-dark: var(--bm-dk-line-strong);
  --bm-color-header-bg: color-mix(in srgb, var(--bm-dk-base) 85%, transparent);
  --bm-color-header-border: rgba(255, 255, 255, 0.08);
  --bm-color-chip-bg: var(--bm-dk-card);
  --bm-color-chip-border: var(--bm-dk-line);
  --bm-color-save-btn-bg: color-mix(in srgb, var(--bm-dk-card) 90%, transparent);
  --bm-color-save-btn-hover: var(--bm-dk-raised);
  --bm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --bm-shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.5);
  --bm-shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
  --bm-shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.7);
  --bm-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --bm-shadow-card-hover: 0 16px 32px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--bm-dk-link) 25%, transparent);
  --bm-color-select-active: rgba(52, 211, 153, 0.15);
  --bm-color-select-backdrop: rgba(0, 0, 0, 0.65);
  --bm-color-lightbox-backdrop: rgba(0, 0, 0, 0.96);
  --bm-color-lightbox-text: #ffffff;
  --bm-color-lightbox-btn-bg: rgba(255, 255, 255, 0.15);
  --bm-color-lightbox-btn-hover: rgba(255, 255, 255, 0.3);

  /* Brand Contrast & On-Dark Tokens (Dark Mode) */
  --bm-color-text-on-dark: #ffffff;
  --bm-color-hero-title: #ffffff;
  --bm-color-hero-subtitle: rgba(255, 255, 255, 0.95);
  --bm-color-cta-title: #ffffff;
  --bm-color-cta-desc: rgba(255, 255, 255, 0.92);
  --bm-color-cta-btn-bg: #ffffff;
  --bm-color-cta-btn-text: #14532d;
  --bm-color-cta-btn-hover-bg: #f1f5f9;
  --bm-color-cta-btn-hover-text: #0f172a;
  --bm-color-btn-primary-text: #ffffff;

  /* Card Badge (Category Pill) Tokens */
  --bm-color-card-badge-bg: var(--bm-dk-raised);
  --bm-color-card-badge-text: #f1f5f9;
  --bm-color-card-badge-border: var(--bm-dk-line-strong);

  /* Category Tile Icon Tokens */
  --bm-color-category-icon-bg: rgba(52, 211, 153, 0.15);
  --bm-color-category-icon-color: #34d399;
  --bm-color-category-icon-hover-bg: #34d399;
  --bm-color-category-icon-hover-color: var(--bm-dk-base);

  /* Opening Hours Tokens */
  --bm-color-hours-border: var(--bm-dk-line);
  --bm-color-hours-time: #f1f5f9;
  --bm-color-hours-row-today-bg: rgba(52, 211, 153, 0.14);
  --bm-color-hours-row-today-text: #4ade80;
  --bm-color-hours-row-today-border: var(--bm-dk-line-strong);
  --bm-color-hours-today-badge-bg: rgba(52, 211, 153, 0.22);
  --bm-color-hours-today-badge-text: #4ade80;
  --bm-color-hours-today-badge-border: #34d399;

  /* Status Badges (Dark Mode Theme) */
  --bm-color-badge-open-bg: rgba(52, 211, 153, 0.18);
  --bm-color-badge-open-text: #4ade80;
  --bm-color-badge-open-border: rgba(74, 222, 128, 0.35);
  --bm-color-badge-closed-bg: rgba(148, 163, 184, 0.15);
  --bm-color-badge-closed-text: #cbd5e1;
  --bm-color-badge-closed-border: rgba(203, 213, 225, 0.3);
  --bm-color-status-dot-bg: #4ade80;
  --bm-color-status-dot-ring: rgba(74, 222, 128, 0.35);
}

:root[data-bm-theme="light"] {
  color-scheme: light;
}

/* Brand colour for TEXT and links: the brand fill is too dark to read on dark surfaces. */
:root { --bm-color-brand-text: var(--bm-color-brand-base); }
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) { --bm-color-brand-text: #4ade80; }
}
:root[data-bm-theme="dark"] { --bm-color-brand-text: #4ade80; }

/* Focus ring colour: the brand fill in light mode, the light brand text colour in dark mode (the fill is only 2.6:1 on the dark page). Visitor accent presets (46-accent.css) redefine it. */
:root { --bm-color-ring: var(--bm-color-brand-base); }
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) { --bm-color-ring: #4ade80; }
}
:root[data-bm-theme="dark"] { --bm-color-ring: #4ade80; }

/* Dark mode: lighter text shades for status and WhatsApp colours so they pass 4.5:1 on dark surfaces. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) {
    --bm-color-danger-dark: #fca5a5;
    --bm-color-success-dark: #86efac;
    --bm-color-whatsapp-dark: #4ade80;
  }
}
:root[data-bm-theme="dark"] {
  --bm-color-danger-dark: #fca5a5;
  --bm-color-success-dark: #86efac;
  --bm-color-whatsapp-dark: #4ade80;
}

/* Brand glyph colours for social chips and share chips (business page). Only the glyph is coloured, the label stays ink. A glyph takes its brand colour only where it reaches 3:1
   on the chip in that theme (the hex values are the brands' commonly published ones, checked by tests/bm-bizpage-browser.js against the real chip background); otherwise currentColor.
   X and TikTok are black, so they are always currentColor. */
:root {
  --bm-glyph-facebook: #1877f2;
  --bm-glyph-instagram: #e4405f;
  --bm-glyph-youtube: #ff0000;
  --bm-glyph-linkedin: #0a66c2;
  --bm-glyph-whatsapp: currentColor;
  --bm-glyph-telegram: currentColor;
  --bm-glyph-x: currentColor;
  --bm-glyph-tiktok: currentColor;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) {
    --bm-glyph-linkedin: currentColor;
    --bm-glyph-whatsapp: #25d366;
    --bm-glyph-telegram: #26a5e4;
  }
}
:root[data-bm-theme="dark"] {
  --bm-glyph-linkedin: currentColor;
  --bm-glyph-whatsapp: #25d366;
  --bm-glyph-telegram: #26a5e4;
}