/* 
  Kaplon Realty Color System
  --------------------------
  - Primary Brand Color:    --kaplon-blue
  - Secondary Brand Color:  --kaplon-red
  - Accent Colors:          --green, --orange, --gray-focus-shadow

  All tokens follow the format:
  --color-[purpose]-[modifier]
  or
  --[color-family]-[intensity]

  Use semantic tokens for UI components, not raw hex values.

  Table of Contents
  -----------------
   1. Brand Identity
   2. Neutral Palette
   3. Semantic Tokens
   4. Headers & Typography Colors
   5. Alerts
   6. Dark Mode Tokens
   7. Shadows & Elevations
   8. Extended Semantic Tokens
   9. Component-Specific Tokens
  10. Utility Aliases & Miscellaneous
*/

/*
   Token Usage (quick guide)
   -------------------------
   - Prefer semantic tokens for components: e.g. surfaces (--surface-*), text-on-color (--color-on-*), borders (--gray-border).
   - Use brand tokens for accents/actions: var(--kaplon-red), var(--kaplon-blue).
   - Avoid raw hex outside this file; do not use var(fallback, #hex) in partials.
   - Dark mode: scope overrides with @media (prefers-color-scheme: dark) and use --dark-* tokens.
   - Examples:
      • Button primary: background: var(--kaplon-red); color: var(--color-on-secondary)
      • Card: background: var(--surface-1); border-color: var(--gray-border)
      • Input (dark): background: var(--dark-surface); color: var(--dark-text)
*/

/* -----------------------------------
   1. Brand Identity
----------------------------------- */
:root {
  /* -------------------------
  /* -------------------------
     Neutral / Grays
  ------------------------- */
  /* -------------------------
     Shadows, Borders, Alpha Tokens
     Centralize rgba() colors used for borders/shadows/text effects
  ------------------------- */

  --color-on-primary: var(--white);
  /* Text on primary (blue) background */
  --color-on-secondary: var(--white);
  /* Text on secondary (red) background */
  --color-on-success: var(--white);
  /* Text on success (green) background */
  --color-on-error: var(--white);
  /* Text on error (red) background */
  --color-on-warning: var(--gray-900);
  /* Text on warning (orange) background */
  --color-on-accent: var(--kaplon-blue);
  /* Text on light accent backgrounds */

  /* -----------------------------------
   4. Headers & Typography Colors
----------------------------------- */

  /* -------------------------
     Headers
  ------------------------- */
  /* alphabetized for scan-ability */
  --color-header-alt: var(--color-header-h2);
  --color-header-default: var(--kaplon-blue);
  --color-header-h1: #111111;
  --color-header-h2: #222222;
  --color-header-h3: #333333;
  --color-header-h4: #444444;
  --color-header-h5: #555555;
  --color-header-h6: #666666;
  --color-header-primary: var(--color-header-h1);
  --color-header-quaternary: var(--color-header-h5);
  --color-header-quinary: var(--color-header-h6);
  --color-header-secondary: var(--color-header-h3);
  --color-header-tertiary: var(--color-header-h4);

  /* -----------------------------------
   5. Alerts
----------------------------------- */
  /* grouped & alphabetized within groups */
  /* Success (adjusted backgrounds for >=4.5:1 with dark text) */
  --color-success-bg: #c3e6cb;
  /* slightly darker than original #d4edda */
  --color-success-border: #b1ddbd;
  /* darkened border for clearer outline */
  --color-success-text: var(--gray-900);
  --color-success-bg-dark: color-mix(in oklab, var(--green) 12%, var(--dark-surface));
  --color-success-border-dark: var(--dark-border);
  --color-success-text-dark: var(--dark-text);

  /* Warning (darken background for >=4.5:1 with dark text) */
  --color-warning-bg: #ffe8a6;
  /* darkened from #fff3cd */
  --color-warning-border: #ffd87a;
  /* adjusted border */
  --color-warning-text: var(--gray-900);
  --color-warning-bg-dark: color-mix(in oklab, var(--orange) 12%, var(--dark-surface));
  --color-warning-border-dark: var(--dark-border);
  --color-warning-text-dark: var(--dark-text);

  /* Error/Danger */
  /* Error/Danger (darken pastel for contrast) */
  --color-error-bg: #f1c2c6;
  /* darkened from #f8d7da */
  --color-error-border: #e8a7ad;
  /* darkened border */
  --color-error-text: var(--gray-900);
  --color-error-bg-dark: color-mix(in oklab, var(--kaplon-red) 12%, var(--dark-surface));
  --color-error-border-dark: var(--dark-border);
  --color-error-text-dark: var(--dark-text);

  /* Info */
  /* Info (darken background for readability) */
  --color-info-bg: #b9e3eb;
  /* darkened from #d1ecf1 */
  --color-info-border: #a5d9e3;
  /* darkened border */
  --color-info-text: var(--gray-900);
  --color-info-bg-dark: color-mix(in oklab, var(--kaplon-blue) 12%, var(--dark-surface));
  --color-info-border-dark: var(--dark-border);
  --color-info-text-dark: var(--dark-text);
  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffeeba;
  --color-warning-text: #856404;

  /* -----------------------------------
   6. Dark Mode Tokens
----------------------------------- */

  --color-nav-link-bg-active-dark: #3a3a3a;
  --color-nav-link-bg-hover-dark: #2c2c2c;
  --dark-bg: var(--dark-bg-base);
  /* Dark mode background */
  --dark-bg-base: #121212;
  /* Dark mode background base */
  --dark-border: var(--dark-border-base);
  /* Dark mode border */
  --dark-border-base: #2b2b2b;
  /* Dark mode border base */
  /* Soft/light border for subtle panel outlines (alias to card token) */
  --dark-border-soft: var(--card-border-soft-dark);
  --dark-dropdown-bg: #222222;
  --dark-hover: var(--dark-hover-base);
  /* Dark mode hover state */
  --dark-hover-base: #2a2a2a;
  /* Dark mode hover base */
  --dark-hover-bg: #2c2c2c;
  --dark-surface: var(--dark-surface-base);
  /* Dark mode surface/cards */
  --dark-surface-base: #14141a;
  /* Dark mode surface base */
  /* Alternate surface for stacked/raised panels (slightly lighter than base) */
  --dark-surface-alt: #18181f;
  --dark-surface-strong: #191919;
  /* Dark mode surface for hover/active states */
  --dark-text: var(--dark-text-base);
  /* Dark mode text, high contrast */
  --dark-text-base: #eaeaea;
  /* Dark mode text base */
  /* Softer text for long paragraphs on very dark surfaces */
  --dark-text-soft: #f2f2f3;
  --dark-text-strong: #eeeeee;
  /* Bright text for dark utilities */
  --dark-text-subtle: #bbbbbb;
  /* Muted text for dark utilities */
  --dark-border-contrast: #111111;
  /* Deep border for dark utilities */
  --dark-border-strong: #333333;
  /* Strong border for dark utilities */
  --dark-border-mid: #444444;
  /* Mid-tone border for dark utilities */

  /* Links on dark surfaces (hosted-safe guidance color) */
  --link-dark: #0f7ec4;

  /* -----------------------------------
     Dark Mode Text Contrast Scale
     (semantic text tokens for dark UIs)
  ----------------------------------- */
  /* Supporting alpha whites */
  --white-70: rgb(255 255 255 / 0.7);
  --white-65: rgb(255 255 255 / 0.65);
  --white-45: rgb(255 255 255 / 0.45);

  /* Semantic text tokens */
  /* Request: neutral text tones — main #f2f2f2, secondary #b2b2b2 */
  --text-primary-dark: #f2f2f2;
  --text-secondary-dark: #b2b2b2;
  --text-disabled-dark: var(--white-45);
  --text-muted-dark: var(--white-70);
  /* Placeholder is slightly brighter than muted for readability */
  --text-placeholder-dark: var(--white-80);
  /* Link uses brand tint for recognizability while passing contrast */
  --text-link-dark: color-mix(in oklab, var(--kaplon-blue) 55%, var(--white) 45%);
  /* Accent text for branded highlights in dark UIs */
  --text-accent-dark: color-mix(in oklab, var(--kaplon-red) 60%, var(--white) 40%);


  /* -----------------------------------
    7. Shadows & Elevations (alphabetized)
    Centralized rgba() colors for borders/shadows/text effects
----------------------------------- */
  --border-subtle-light: rgb(255 255 255 / 0.1);
  --elevation-1: 0 4px 20px var(--shadow-xxs);
  --elevation-2: 0 6px 24px var(--shadow-sm);
  --elevation-3: 0 8px 30px var(--shadow-md);
  --gradient-overlay-dark: rgb(0 0 0 / 0.1);
  --shadow-brand-glow: 0 0 12px rgb(25 25 68 / 0.6), 0 0 8px rgb(236 22 8 / 0.35);
  /* Brand glow */
  --shadow-card-em: 0.05em 0.2em 0.6em rgb(0 0 0 / 0.2);
  --shadow-card-xl: 0 4px 12px rgb(0 0 0 / 0.25);
  --shadow-card-xl-dark: 0 4px 12px rgb(255 255 255 / 0.08);
  --shadow-dark-card: 0 2px 8px rgb(255 255 255 / 0.08);
  --shadow-dark-lg: 0 3px 16px rgb(0 0 0 / 0.6);
  --shadow-dark-md: 0 6px 12px rgb(0 0 0 / 0.7);
  --shadow-dark-section: 0 4px 6px rgb(0 0 0 / 0.3);
  --shadow-dark-sm: 0 1px 2px rgb(25 25 68 / 0.55);
  --shadow-dark-xl: 0 25px 45px rgb(2 8 36 / 0.65);
  --shadow-dark-pill: inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 8px 20px rgb(1 6 22 / 0.45);
  --shadow-dark-promo: 0 15px 35px rgb(0 0 0 / 0.45);
  --shadow-edge-highlight: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  --shadow-edge-highlight-strong: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  --shadow-focus: 0 0 0 3px var(--gray-focus-shadow);
  --shadow-focus-dark: 0 0 0 3px rgb(0 0 0 / 0.45);
  --shadow-hero-heading: 0 2px 8px rgb(0 0 0 / 0.35);
  --shadow-hero-text: 0 1px 4px rgb(0 0 0 / 0.25);
  --shadow-lg: 0 10px 20px rgb(0 0 0 / 0.19), 0 6px 6px rgb(0 0 0 / 0.23);
  --shadow-lift-md: 0 2px 8px rgb(0 0 0 / 0.35);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-outline-strong: 0 0 2px 2px rgb(0 0 0 / 0.6);
  --shadow-sm: 0 2px 6px rgb(0 0 0 / 0.12);
  --shadow-text-soft: 0 1px 3px rgb(0 0 0 / 0.25);
  --shadow-text-strong: 0 2px 6px rgb(0 0 0 / 0.45);
  --shadow-xs: 0 1px 4px rgb(0 0 0 / 0.08);
  --shadow-xxs: 0 0 2px rgb(0 0 0 / 0.05);

  /* Subtle borders (light/dark contexts) */
  /* Light UIs often need a soft dark border; dark UIs need a soft light border */
  --border-subtle-dark: rgb(255 255 255 / 0.12);

  /* -----------------------------------
   8. Extended Semantic Tokens
----------------------------------- */
  /* alphabetized */
  --color-badge-blue: #007bff;
  /* Badge/info blue */
  --color-badge-green: #28a745;
  /* Badge success green */
  --color-badge-red: #dc3545;
  /* Badge red (danger) */
  --color-badge-yellow: #ffc107;
  /* Badge warning yellow */
  --color-divider-light: #e1e1e1;
  /* Divider light gray */
  --color-footer-dark-gray: #343a40;
  /* Footer background alternative */
  --color-header-light-blue: #17a2b8;
  /* Light blue, header accents */
  --color-input-focus-outline: #80bdff;
  /* Input focus ring blue */
  --color-light-red-hover: #ffcccb;
  /* Light red hover state for navigation */
  --color-link-hover-blue: #0056b3;
  /* Link hover darker blue */
  --color-outline-focus: rgb(0 123 255 / 0.25);
  /* Focus outline */
  --color-shadow-light: rgb(0 0 0 / 0.075);
  /* Light shadow for cards */

  /* -----------------------------------
   9. Component-Specific Tokens
----------------------------------- */

  /* -----------------------------------
     Form Dark Mode (alphabetized)
  ----------------------------------- */
  --form-dark-border: var(--dark-border);
  --form-dark-bg: var(--dark-bg);
  --form-dark-text: var(--text-primary-dark);

  /* -----------------------------------
     IDX Omnibar Tokens (alphabetized)
  ----------------------------------- */
  --color-omnibar-bg: var(--surface-1);
  --color-omnibar-bg-dark: var(--dark-bg);
  --color-omnibar-border: var(--gray-border);
  --color-omnibar-border-dark: var(--gray-border-dark);

  /* -----------------------------------
     Navigation & Dropdown
  ----------------------------------- */
  /* (already included in Dark Mode Tokens above) */

  /* -----------------------------------
     Custom Communities Page Tokens
  ----------------------------------- */
  /* Component tokens (alphabetized) */
  --shadow-card-md: 0 2px 6px var(--shadow-sm);
  --shadow-card-sm: 0 1px 4px var(--shadow-xs);
  --card-border-soft: rgb(0 0 0 / 0.08);
  --card-border-soft-dark: rgb(255 255 255 / 0.08);
  --card-shadow-base: 0 6px 20px rgb(0 0 0 / 0.08);
  --card-shadow-hover: 0 12px 28px rgb(0 0 0 / 0.12);
  --card-shadow-dark: 0 6px 24px rgb(0 0 0 / 0.28);
  --card-shadow-dark-hover: 0 10px 32px rgb(0 0 0 / 0.36);
  --surface-alt: #fafafa;
  /* alternate card background */
  --chip-nav-bg: var(--surface-1);
  --chip-nav-shadow: var(--shadow-sm);
  --chip-nav-active-bg: var(--kaplon-blue-light);
  --chip-nav-active-border: var(--kaplon-blue);
  --chip-nav-active-text: var(--neutral-light);
  /* Navigation token defaults */
  --color-nav-link: var(--neutral-light);
  --color-nav-link-hover: var(--kaplon-red-light);
  --color-nav-link-bg-hover: var(--kaplon-blue-dark);
  --color-nav-link-bg-active: var(--kaplon-blue);
  --color-nav-link-active: var(--neutral-light);
  --chip-section-divider: rgb(0 0 0 / 0.08);

  /* Burlington community page specific tokens */
  --burlington-text-muted: rgb(15 59 87 / 0.75);
  /* Muted text for stats, trust notes (75% opacity) */
  --burlington-text-medium: rgb(15 59 87 / 0.8);
  /* Medium muted text for lists (80% opacity) */
  --burlington-text-subtle: rgb(15 59 87 / 0.7);
  /* Subtle text for notes (70% opacity) */
  --burlington-bg-subtle: rgb(15 59 87 / 0.06);
  /* Very subtle background tint (6% opacity) */
  --burlington-bg-soft: rgb(15 59 87 / 0.08);
  /* Soft background for links/badges (8% opacity) */
  --burlington-shadow-hero: 0 18px 45px rgb(16 35 46 / 0.12);
  /* Hero image shadow */
  --burlington-shadow-hover: 0 10px 20px rgb(15 59 87 / 0.18);
  /* Button hover shadow */
  --burlington-shadow-card: 0 15px 40px rgb(16 35 46 / 0.08);
  /* Card shadow */
  --burlington-shadow-cta: 0 20px 45px rgb(16 35 46 / 0.25);
  /* CTA bar shadow */
  --burlington-border-section: rgb(238 238 238);
  /* Section divider border */
  --burlington-cta-bg: linear-gradient(140deg, rgb(15 59 87 / 0.95), rgb(28 87 123 / 0.85));
  /* CTA bar gradient background */
  --burlington-cta-text: rgb(255 255 255 / 0.9);
  /* CTA bar lead text (90% white) */
  --burlington-cta-trust: rgb(255 255 255 / 0.92);
  /* CTA bar trust text (92% white) */


  /* -----------------------------------
   10. Utility Aliases & Miscellaneous
----------------------------------- */

  /* Aliases */
  --color-gray-text: var(--gray-text);
  --color-text: var(--gray-text);
  --color-surface-dark: var(--dark-surface);
  --color-border-dark: var(--dark-border);
  --color-text-dark: var(--dark-text);
  --color-white: var(--white);
  --kaplon-white: var(--white);

  /* -------------------------
     Miscellaneous (alphabetized)
  ------------------------- */
  /* Animation timings */
  --anim-duration-bounce: 1s;
  --anim-duration-fast: 0.2s;
  /* unified fast */
  --anim-duration-normal: 0.3s;
  /* common default */
  --anim-duration-medium: 0.6s;
  --anim-duration-slow: 1.5s;

  /* Animation easings */
  --anim-ease-bounce: ease;
  --anim-ease-in-out: ease-in-out;
  --anim-ease-out: ease-out;
  --anim-ease-standard: ease-in-out;

  /* Typography: letter-spacing scales */
  --ls-tight: 0.01em;
  --ls-normal: 0.03em;
  --ls-wide: 0.04em;

  --card-max-width: 50%;
  /* Card max width, layout constraint - consider moving to layout partial */
  --font-size-base: 16px;
  /* Base font size for rem scaling - consider moving to typography partial */
  --font-primary: "Montserrat", "Open Sans", sans-serif;
  --font-size-button: 1rem;
  --hover-dark-blue: var(--hover-dark-blue-base);
  /* Hover state for dark blue elements */
  --hover-dark-blue-base: #0f0f36;
  /* Hover dark blue base */
  --kaplon-black: #000000;
  --line-height-base: 1.6;
  /* Base line height for readability - consider moving to typography partial */
  --ls-button: 0.5px;
  --nav-hover-light-red: var(--nav-hover-light-red-base);
  /* Nav hover, light red background */
  --nav-hover-light-red-base: #ffcccc;
  /* Nav hover light red base */
  --nav-white: #ffffff;
  /* Nav background, white */
  --recaptcha-gray: #666666;
  /* Updated to full hex for consistency */
  --recaptcha-text: var(--recaptcha-gray);
  /* Text color for reCAPTCHA widget */
  --neutral-light: var(--white);
  --neutral-dark: var(--gray-900);
  --button-radius: var(--radius-1, 6px);
  --btn-radius: var(--button-radius);
  --btn-min-width: 140px;
  --btn-padding-block: 0.75rem;
  --btn-padding-inline: 1.75rem;
  --btn-padding: var(--btn-padding-block) var(--btn-padding-inline);
  --btn-font-weight: 600;
  --state-disabled-bg: #cccccc;
  --state-disabled-text: #888888;
  --text-outline: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
  /* Text outline for contrast */


  /* =====================================================================
   PATCH: Ensure core tokens exist for dark mode & buttons (2025-08-26)
   - Some variables referenced in style.css/buttons.css were undefined
     (e.g., --gray-darkest, --gray-border-dark, --kaplon-blue, etc.)
   - When a CSS var is undefined, the property is dropped → white bg/text.
   - These definitions provide safe, brand-correct fallbacks.
===================================================================== */

  /* Brand */
  --kaplon-blue: #191944;
  /* Kaplon sign blue */
  --kaplon-blue-dark: #0d133d;
  /* already present above; keep alias here */
  --kaplon-blue-light: #2a2a6a;
  /* gentle hover tint */
  --kaplon-navy: #071530;
  /* deep footer/nav background */
  --kaplon-footer-bg: #191944;
  --kaplon-footer-text: #ffffff;
  --kaplon-footer-hover: color-mix(in oklab, #191944 90%, black);
  --kaplon-red: #ec1608;
  /* brand red (logo) */
  --kaplon-red-dark: #cc1206;
  --kaplon-red-active: #a50000;
  /* pressed state for brand buttons */
  --kaplon-blue-active: #14143d;
  /* pressed state for secondary buttons */

  /* Accessible button red (keeps brand but boosts contrast with white text) */
  --button-red-bg: var(--kaplon-red-dark);
  --button-red-bg-hover: color-mix(in oklab, var(--kaplon-red-dark) 90%, black);
  --button-red-border: var(--kaplon-red-dark);
  --btn-primary-bg: var(--button-red-bg, var(--kaplon-red));
  --btn-primary-border: var(--btn-primary-bg);
  --btn-primary-text: var(--color-on-secondary, var(--white));
  --btn-primary-hover-bg: var(--button-red-bg-hover);
  --btn-primary-hover-border: var(--btn-primary-hover-bg);
  --btn-secondary-bg: var(--kaplon-blue-dark);
  --btn-secondary-border: var(--btn-secondary-bg);
  --btn-secondary-text: var(--neutral-light, var(--white));
  --btn-secondary-hover-bg: var(--kaplon-blue-light);
  --btn-secondary-hover-border: var(--btn-secondary-hover-bg);
  --btn-outline-hover-bg: var(--kaplon-blue);
  --btn-outline-hover-border: var(--kaplon-blue);
  --btn-outline-hover-text: var(--white);
  --btn-shadow: var(--shadow-lift-md);
  --btn-hover-shadow: var(--shadow-edge-highlight-strong), var(--shadow-dark-md);

  /* Neutral scale (shared) */
  --gray-100: #e6e6e6;
  --gray-200: #d0d0d0;
  --gray-300: #b3b3b3;
  --gray-400: #8a8a8c;
  --gray-500: #6a6a6c;
  --gray-600: #4a4a4c;
  --gray-700: #3a3a3c;
  --gray-800: #2c2c2e;
  --gray-900: #222222;
  --gray-bg: #f5f5f7;
  --gray-dark: #1a1a1a;
  /* surfaces/cards in dark */
  --gray-darkest: #121212;
  /* page bg in dark */
  --gray-light: #f0f0f2;
  --gray-lighter: #efefef;

  /* Text + borders */
  --gray-text: #222222;
  --gray-text-base: var(--gray-text);
  --gray-border-light: rgb(0 0 0 / 0.18);
  --gray-border-dark: rgb(255 255 255 / 0.16);
  --gray-border-base: rgb(0 0 0 / 0.18);
  --gray-border: var(--gray-border-base);

  /* Surfaces */
  --white: #ffffff;
  --white-90: rgb(255 255 255 / 0.9);
  --white-88: rgb(255 255 255 / 0.88);
  --white-85: rgb(255 255 255 / 0.85);
  --white-80: rgb(255 255 255 / 0.8);
  --white-60: rgb(255 255 255 / 0.6);
  --surface-1: var(--white);
  --surface-soft: #f9f9f9;

  /* Focus/accessibility */
  --gray-focus-shadow: rgb(236 22 8 / 0.25);
  /* red-tinted focus outline */


  /* -----------------------------------
   Missing Neutrals, Footer, Black, Overlays
   (added to satisfy references across partials)
----------------------------------- */
  /* Alphabetized */
  --black: #000000;
  /* Common alias */
  --footer-bg: var(--kaplon-blue);
  /* Footer tokens (referenced by utilities/style.css) */
  --footer-text: var(--white);
  --footer-bg-hover: color-mix(in oklab, var(--kaplon-blue) 90%, black);
  /* Footer background hover helper */
  --footer-text-bright: var(--white);
  --gray-850: #2a2a2a;
  /* Intermediate neutral used in dark UI footers */
  --kaplon-black-transparent: rgb(0 0 0 / 0.6);
  /* Modal-related tokens */
  --modal-shadow: var(--shadow-lg);
  --overlay-20: rgb(0 0 0 / 0.2);
  /* Overlay tints for image/text overlays */
  --overlay-40: rgb(0 0 0 / 0.4);
  --overlay-60: rgb(0 0 0 / 0.6);


  /* -----------------------------------
   Accent scales used by alerts & components
----------------------------------- */
  /* Greens */
  --green: #28a745;
  --green-dark: #1e7e34;

  /* Mixed accents (alphabetized) */
  --kaplon-red-light: #ff3b2f;
  /* Brand red light tint (used in dark-mode highlights) */
  --orange: #fd7e14;
  --orange-dark: #c35a02;

  /* -----------------------------------
     Status & Utility Tokens (dark-mode friendly)
     Centralized colors so badges/buttons stay consistent site‑wide
  ----------------------------------- */
  /* Accent red for active pagination and CTA highlights */
  --accent-red-primary: #e63946;
  /* Generic primary accent alias for components (requested by spec) */
  --color-accent-primary: var(--accent-red-primary);
  /* Listing card surface for dark UIs */
  --listing-card-bg-dark: var(--dark-surface-base);
  /* Inner panel surface to slightly lift price/MLS data */
  --panel-dark: #1a1a22;
  /* Status badges — require white text for WCAG contrast */
  --status-active: #1e7e34;
  /* deep green */
  --status-pending: #b45309;
  /* deep amber (white text >= 4.5:1) */
  --status-sold: var(--kaplon-red);
  /* brand red */
  --status-comingsoon: var(--kaplon-blue);
  --status-text: #ffffff;
  /* Results/tally bar (e.g., "1 result returned") */
  --results-bar-bg: color-mix(in oklab, var(--kaplon-red) 12%, var(--dark-surface));
  --results-bar-text: var(--white-88);
  --results-bar-border: var(--dark-border);

}