/**
 * Discover page token aliases and @layer tokens (loads after base/variables.css on discover.html).
 * Canonical :root color/spacing tokens: ../base/variables.css
 * Global dark mode: ../themes/dark-mode.css (included from base_renter.html before this stack).
 * Do not duplicate global token definitions here; only discover-scoped aliases and layers.
 */

/* ========================================
 * CSS CASCADE LAYERS
 * ========================================
 * Define layer order to reduce !important usage
 * Layers listed first have LOWER priority
 * ======================================== */
@layer base, tokens, components, responsive, overrides;

/* ========================================
 * 1. CSS VARIABLES & DESIGN SYSTEM
 * ======================================== */
/**
 * CSS DESIGN SYSTEM
 * =================
 * Centralized design tokens for consistency across the application
 * Edit these variables to update the entire theme
 */
@layer tokens {
:root {
  /*
   * Brand accent (shared with global :root --color-brand-*); discover CTAs
   */
  --discover-brand-accent: var(--color-brand-accent);
  --discover-brand-accent-fg: var(--color-brand-accent-fg);
  --discover-brand-accent-hover: var(--color-brand-accent-hover);
  --discover-brand-accent-pressed: var(--color-brand-accent-pressed);
  --discover-brand-accent-text: var(--color-brand-accent-text);
  --discover-brand-accent-focus: var(--color-brand-accent-focus);
  --discover-brand-accent-shadow: var(--color-brand-accent-shadow);
  --discover-brand-accent-outline-hover: var(--color-brand-accent-outline-hover);

  /*
   * PRIMARY COLORS - Alias to base variables.css
   */
  --primary-blue: var(--discover-premium-ink);
  --primary-blue-dark: var(--discover-premium-muted);
  --primary-blue-darker: var(--discover-premium-ink);
  --primary-blue-light: var(--discover-premium-muted);
  --primary-blue-lighter: var(--discover-premium-hover);
  --primary-blue-bg: var(--discover-premium-hover);
  --primary-blue-bg-lighter: var(--discover-premium-wash);

  /*
   * NEUTRAL COLORS - Alias to base variables.css (gray scale)
   */
  --neutral-50: var(--color-gray-50);
  --neutral-100: var(--color-gray-100);
  --neutral-200: var(--color-gray-200);
  --neutral-300: var(--color-gray-300);
  --neutral-400: var(--color-gray-400);
  --neutral-500: var(--color-gray-500);
  --neutral-600: var(--color-gray-600);
  --neutral-700: var(--color-gray-700);
  --neutral-800: var(--color-gray-800);
  --neutral-900: var(--color-gray-900);
  --white: #ffffff;

  /*
   * STATUS COLORS - Alias to base
   */
  --success-green: var(--color-success-green);

  /*
   * TEXT AND BACKGROUND - Inherit from base variables.css (:root); no self-referential aliases
   */
  --bg-primary: var(--bg-surface);
  --bg-secondary: var(--bg-base);
  --bg-tertiary: var(--bg-subtle);
  /* Discover spot card / sheet surfaces in dark UI (matches tablet spot-card dark treatment) */
  --bg-card-dark: color-mix(in srgb, var(--color-dark-surface) 95%, transparent);
  --border-dark: rgba(255, 255, 255, 0.12);
  --border-subtle: var(--border-light);
  --border-medium: var(--border-default);

  /*
   * COMMON BORDERS & TRANSFORMS
   * Reusable border and transform patterns
   */
  --transform-hover: translateY(-1px); /* Subtle lift on hover */
  --transform-scale: scale(1.05);      /* Scale on interaction */

  /* Spacing scale: use app/static/css/base/variables.css (--spacing-xs through --spacing-2xl) */

  /*
   * BORDER RADIUS
   * Consistent corner rounding for UI elements
   */
  --radius-sm: 0.375rem;   /* 6px  - Small radius */
  --radius-md: 0.5rem;     /* 8px  - Medium radius */
  --radius-lg: 0.75rem;    /* 12px - Large radius */
  --radius-xl: 1rem;       /* 16px - Extra large radius */

  /* Core shadows: use variables.css (--shadow-sm, --shadow-md, --shadow-lg, --shadow-xl, --shadow-card, --shadow-card-hover) */

  /* Discover-specific shadows */
  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1);  /* Dropdown menus */
  --shadow-focus: var(--discover-premium-focus);            /* Focus rings */
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);          /* Hover states */
  --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-overlay: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /*
   * TRANSITIONS & ANIMATIONS
   * Easing: ease-standard (Material), ease-premium (iOS-style).
   * Durations: see --duration-emphasis; other timings use variables.css where needed.
   */

  /* Professional Easing Curves */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);     /* Material Design - responsive feel */
  --ease-premium: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS-inspired - luxurious, smooth */

  /* Duration Scale */
  --duration-emphasis: 500ms; /* Attention-grabbing animations */

  /* Pre-composed Transitions (for common use cases) */
  --transition-fast: 150ms var(--ease-standard);         /* Quick interactions */
  --transition-normal: 200ms var(--ease-standard);       /* Standard transitions */
  --transition-slow: 300ms var(--ease-premium);          /* Slower, premium feel */
  --transition-cubic: 200ms var(--ease-standard);        /* Legacy compatibility */

  /*
   * RESPONSIVE BREAKPOINTS
   * ==========================================
   * SINGLE SOURCE OF TRUTH - Must align exactly with DiscoverConstants.BREAKPOINTS
   * JavaScript: MOBILE: 375px, MOBILE_WIDE: 567px, PHONE_TOOLBAR: 640px, TABLET: 1100px, DESKTOP: 1101px
   * ==========================================
   */
  --bp-mobile: 375px;       /* Mobile (small phones) - DiscoverConstants.MOBILE */
  --bp-mobile-wide: 567px;  /* Mobile wide (sheet/listings tier) - DiscoverConstants.MOBILE_WIDE */
  --bp-phone-toolbar: 640px; /* Compact topbar layout - DiscoverConstants.PHONE_TOOLBAR */
  --bp-tablet: 1100px;      /* Tablet boundary - DiscoverConstants.TABLET */
  --bp-desktop: 1101px;     /* Desktop start - DiscoverConstants.DESKTOP */

  /* Listings sheet + overlay header controls (Filters / Sort) */
  --discover-listings-header-control-min-height: 44px;
  --discover-listings-header-control-pad-y: clamp(0.28rem, 0.75vw, 0.36rem);
  --discover-listings-header-control-pad-x: clamp(0.38rem, 1vw, 0.5rem);
  --discover-listings-header-control-font: clamp(0.6875rem, 1.65vw, 0.75rem);
  --discover-listings-header-control-icon: clamp(0.75rem, 1.75vw, 0.8125rem);
  --discover-listings-header-control-gap: clamp(0.2rem, 0.55vw, 0.28rem);
  --discover-listings-header-control-radius: 8px;

  /*
   * RESPONSIVE SPACING TOKENS
   * ==========================================
   * Fluid spacing that adapts to viewport size using clamp()
   * Format: clamp(min, preferred, max)
   * ==========================================
   */
  --spacing-responsive-sm: clamp(0.5rem, 1vw, 0.75rem);     /* 8px -> 12px */
  --spacing-responsive-md: clamp(0.75rem, 1.5vw, 1rem);     /* 12px -> 16px */
  --spacing-responsive-lg: clamp(1rem, 2vw, 1.5rem);        /* 16px -> 24px */

  /*
   * RESPONSIVE TOUCH TARGETS
   * ==========================================
   * Device-specific minimum touch target sizes
   * Mobile: 44px (Apple HIG), Tablet: 40px, Desktop: 36px
   * ==========================================
   */
  --touch-target-mobile: 44px;   /* iOS/Android minimum - DiscoverConstants */
  --touch-target-tablet: 40px;   /* Tablet comfortable size */
  --touch-target-desktop: 36px;  /* Desktop mouse precision */

  /*
   * DISCOVER PREMIUM PALETTE — warm neutral marketplace shell.
   */
  --discover-premium-ink: #171412;
  --discover-premium-ink-soft: #44403c;
  --discover-premium-muted: #78716c;
  --discover-premium-line: rgba(120, 113, 108, 0.2);
  --discover-premium-line-strong: rgba(87, 83, 78, 0.34);
  --discover-premium-surface: rgba(255, 255, 255, 0.98);
  --discover-premium-surface-solid: #ffffff;
  --discover-premium-surface-soft: rgba(250, 250, 249, 0.96);
  --discover-logo-scrim: rgba(255, 255, 255, 0.92);
  --discover-premium-wash: #f5f3ef;
  --discover-premium-hover: rgba(250, 247, 242, 0.96);
  --discover-premium-active: rgba(41, 37, 36, 0.08);
  --discover-premium-shadow: 0 20px 55px rgba(28, 25, 23, 0.14), 0 2px 8px rgba(28, 25, 23, 0.07);
  --discover-premium-shadow-soft: 0 1px 2px rgba(28, 25, 23, 0.05), 0 12px 34px rgba(28, 25, 23, 0.08);
  --discover-premium-focus: 0 0 0 3px rgba(120, 113, 108, 0.16), 0 10px 24px rgba(28, 25, 23, 0.1);

  /*
   * DISCOVER CHROME — clean marketplace shell.
   */
  --discover-topbar-bg: var(--discover-premium-surface);
  --discover-topbar-border: var(--discover-premium-line);
  --discover-topbar-shadow: var(--discover-premium-shadow-soft);
  --discover-topbar-extension-bg: var(--discover-premium-surface-soft);

  /*
   * DISCOVER SURFACES — warm frosted panels and cards.
   */
  --discover-surface-card: var(--discover-premium-surface-solid);
  --discover-glass-strong: var(--discover-premium-surface);
  --discover-glass-medium: var(--discover-premium-surface-soft);
  --discover-glass-soft: rgba(250, 247, 242, 0.74);
  --discover-glass-map: var(--discover-premium-surface);
  --discover-glass-map-active: var(--discover-premium-surface-solid);
  /* Listing sheet cards (light): neutral cards with subtle separation. */
  --discover-glass-listing-card: rgba(255, 255, 255, 0.96);
  /* Title marquee / horizontal scroll fade edges (light cards) */
  --discover-fade-marquee-edge: rgba(250, 247, 242, 0.62);
  --discover-fade-marquee-mid: rgba(250, 247, 242, 0);
  /* Focus ring halo on light surfaces (prefer over raw white) */
  --discover-focus-ring-surface: #faf7f2;

  /*
   * DISCOVER LISTINGS CONTROLS — filters, sort, segmented controls, counts.
   */
  --discover-listings-panel-bg: var(--discover-premium-surface);
  --discover-listings-panel-bg-dark: color-mix(in srgb, var(--color-dark-surface) 96%, transparent);
  --discover-listings-panel-border: var(--discover-premium-line);
  --discover-listings-panel-border-dark: color-mix(in srgb, var(--color-dark-border) 58%, transparent);
  --discover-control-bg: var(--discover-premium-surface-solid);
  --discover-control-bg-hover: var(--discover-premium-hover);
  --discover-control-bg-active: var(--discover-premium-active);
  --discover-control-bg-dark: color-mix(in srgb, var(--color-dark-surface-raised) 88%, transparent);
  --discover-control-bg-hover-dark: color-mix(in srgb, var(--color-dark-border-strong) 92%, transparent);
  --discover-control-bg-active-dark: color-mix(in srgb, var(--color-dark-border) 86%, transparent);
  --discover-control-border: var(--discover-premium-line);
  --discover-control-border-hover: var(--discover-premium-line-strong);
  --discover-control-border-dark: color-mix(in srgb, var(--color-dark-border) 58%, transparent);
  --discover-control-border-hover-dark: color-mix(in srgb, var(--color-dark-border-strong) 62%, transparent);
  --discover-control-text: var(--discover-premium-ink-soft);
  --discover-control-text-strong: var(--discover-premium-ink);
  --discover-control-text-muted: var(--discover-premium-muted);
  --discover-control-text-dark: var(--color-dark-text-muted);
  --discover-control-text-strong-dark: var(--color-dark-text);
  --discover-control-text-muted-dark: var(--color-dark-text-secondary);
  --discover-control-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
  --discover-control-shadow-active: 0 10px 24px rgba(28, 25, 23, 0.16);
  /*
   * Active amenity filter badges (map / top bar): muted forest green, not neon mint.
   * Used by amenity-badge.css; keeps chips readable on aerial imagery without harsh contrast.
   */
  --discover-amenity-badge-surface: rgba(240, 253, 244, 0.9);
  --discover-amenity-badge-surface-hover: rgba(236, 250, 241, 0.96);
  --discover-amenity-badge-border: rgba(22, 101, 52, 0.26);
  --discover-amenity-badge-border-hover: rgba(22, 101, 52, 0.36);
  --discover-amenity-badge-text: #164536;
  --discover-amenity-badge-icon: rgba(22, 101, 52, 0.72);
  --discover-amenity-badge-icon-hover: #123d2c;
  --discover-amenity-badge-map-surface: #fcfcfb;
  --discover-amenity-badge-map-border: rgba(22, 101, 52, 0.32);
  --discover-amenity-badge-map-border-hover: rgba(22, 101, 52, 0.42);
  --discover-amenity-badge-map-shadow: 0 2px 12px rgba(28, 25, 23, 0.1), 0 1px 2px rgba(28, 25, 23, 0.05);
  --discover-amenity-badge-map-shadow-hover: 0 4px 16px rgba(28, 25, 23, 0.12), 0 1px 3px rgba(28, 25, 23, 0.06);
  --discover-amenity-badge-map-text: #174a36;
  --discover-amenity-badge-map-icon: rgba(23, 74, 54, 0.88);
  --discover-amenity-badge-map-icon-hover: #0f2e1f;
  --discover-amenity-badge-dark-surface: rgba(15, 56, 34, 0.42);
  --discover-amenity-badge-dark-surface-hover: rgba(15, 56, 34, 0.52);
  --discover-amenity-badge-dark-border: rgba(45, 212, 115, 0.26);
  --discover-amenity-badge-dark-border-hover: rgba(45, 212, 115, 0.38);
  --discover-amenity-badge-dark-text: #b6e9c9;
  --discover-amenity-badge-dark-icon: rgba(186, 244, 208, 0.88);
  --discover-amenity-badge-dark-icon-hover: #d1fae5;
  --discover-amenity-badge-map-dark-surface: rgba(15, 56, 34, 0.9);
  --discover-amenity-badge-map-dark-surface-hover: rgba(15, 56, 34, 0.94);
  --discover-amenity-badge-map-dark-border: rgba(45, 212, 115, 0.34);
  --discover-amenity-badge-map-dark-border-hover: rgba(45, 212, 115, 0.46);
  --discover-amenity-badge-map-dark-shadow: 0 2px 12px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.16);
  --discover-amenity-badge-map-dark-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.18);
  --discover-control-track-bg: var(--discover-premium-wash);
  --discover-control-track-bg-dark: color-mix(in srgb, var(--color-dark-fill-subtle) 92%, transparent);
  --discover-count-text: #44403c;
  --discover-count-text-dark: var(--color-dark-text-muted);

  /*
   * DISCOVER POPOVERS — shared surface for autocomplete, sort menus, and datetime.
   * Keep this scoped to Discover so other product areas can retain their own visual language.
   */
  --discover-popover-bg: var(--discover-premium-surface-soft);
  --discover-popover-bg-elevated: var(--discover-premium-surface-solid);
  --discover-popover-bg-dark: var(--color-dark-surface-raised);
  --discover-popover-bg-dark-elevated: var(--color-dark-surface-overlay);
  --discover-popover-border: var(--discover-premium-line);
  --discover-popover-border-dark: color-mix(in srgb, var(--color-dark-border-strong) 72%, transparent);
  --discover-popover-hover: var(--discover-premium-hover);
  --discover-popover-active: var(--discover-premium-active);
  --discover-popover-hover-dark: color-mix(in srgb, var(--color-dark-surface-overlay) 78%, transparent);
  --discover-popover-active-dark: color-mix(in srgb, var(--color-dark-border) 72%, transparent);
  --discover-popover-text: #292524;
  --discover-popover-text-muted: #78716c;
  --discover-popover-text-dark: var(--color-dark-text-muted);
  --discover-popover-text-muted-dark: var(--color-dark-text-secondary);
  --discover-popover-focus: var(--discover-premium-focus);
  --discover-popover-shadow: var(--discover-premium-shadow);
  --discover-popover-shadow-dark: 0 20px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.25);
  --discover-popover-radius: 1rem;
  --discover-popover-attached-seam-radius: 0.45rem;
  --discover-popover-min-width: 360px;
  --discover-popover-max-width: 480px;
  --discover-popover-max-height: 560px;
  --discover-popover-padding-x: 1.25rem;
  --discover-popover-padding-y: 1rem;
  --discover-popover-item-radius: 0.75rem;
  --discover-popover-item-padding-y: 0.75rem;
  --discover-popover-item-padding-x: 0.875rem;
  --discover-popover-fade-ms: 200ms;

  /*
   * DISCOVER CHROME DENSITY — shared surfaces, edges, and shadows used by
   * topbar, listings, map controls, and popup polish.
   */
  --discover-chrome-edge: clamp(0.625rem, 1.5vw, 1.25rem);
  --discover-chrome-gap: clamp(0.5rem, 1.2vw, 0.875rem);
  --discover-chrome-control-height: clamp(2.5rem, 4.2vw, 3rem);
  --discover-chrome-radius-sm: 0.75rem;
  --discover-chrome-radius-md: 1rem;
  --discover-chrome-radius-lg: 1.35rem;
  --discover-chrome-surface: var(--discover-premium-surface);
  --discover-chrome-surface-solid: var(--discover-premium-surface-solid);
  --discover-chrome-surface-muted: var(--discover-premium-surface-soft);
  --discover-chrome-border: var(--discover-premium-line);
  --discover-chrome-border-strong: var(--discover-premium-line-strong);
  --discover-chrome-text: var(--discover-premium-ink);
  --discover-chrome-muted: var(--discover-premium-muted);
  --discover-chrome-shadow-panel: var(--discover-premium-shadow);
  --discover-chrome-shadow-card: var(--discover-premium-shadow-soft);
  --discover-chrome-shadow-card-hover: 0 14px 34px rgba(28, 25, 23, 0.12);

  /* Semantic aliases (shared with base/variables.css; same product tone on discover) */
  --surface-page: var(--bg-base);
  --surface-raised: var(--bg-surface);
  --surface-subtle: var(--bg-subtle);
  --border-ui: var(--border-default);
  --border-ui-subtle: var(--border-light);
  --text-heading: var(--text-primary);
  --text-supporting: var(--text-secondary);
  --text-caption: var(--text-tertiary);
  --accent-primary: var(--color-primary-blue);

  /* Z-index scale: app/static/css/base/variables.css (--z-base through --z-maximum) */
}
} /* End @layer tokens */

@media (max-width: 1100px) {
  body.discover-page {
    --discover-mobile-edge: max(0.75rem, env(safe-area-inset-left, 0px));
    --discover-mobile-edge-right: max(0.75rem, env(safe-area-inset-right, 0px));
    --discover-mobile-panel-padding: 0.75rem;
    --discover-mobile-font-headline: 1rem;
    --discover-mobile-font-body: 0.8125rem;
    --discover-mobile-font-meta: 0.6875rem;
    --discover-mobile-font-control: 0.75rem;
    /* Tighter between cards; roomier padding lives on the card itself. */
    --discover-mobile-list-gap: 0.5rem;
  }
}

@media (max-width: 567px) {
  body.discover-page {
    --discover-popover-padding-x: 0.75rem;
    --discover-popover-padding-y: 0.5rem;
    --discover-popover-item-padding-y: 0.45rem;
    --discover-popover-item-padding-x: 0.55rem;
    --discover-popover-item-radius: 0.625rem;
    --discover-popover-radius: var(--discover-mobile-panel-radius, 0.875rem);
    --discover-mobile-edge: max(0.75rem, env(safe-area-inset-left, 0px));
    --discover-mobile-edge-right: max(0.75rem, env(safe-area-inset-right, 0px));
    --discover-mobile-control-height: 2.25rem;
    --discover-mobile-touch-target: 2.5rem;
    --discover-mobile-panel-radius: 0.875rem;
    --discover-mobile-sheet-radius: 1rem;
    --discover-mobile-panel-padding: 0.625rem;
    --discover-mobile-panel-gap: 0.375rem;
    --discover-mobile-overlay-inline-gap: 0.625rem;
    --discover-mobile-overlay-header-padding: 0.625rem;
    --discover-mobile-overlay-content-padding: 0.625rem;
    --discover-mobile-overlay-footer-padding: 0.625rem;
    /* Card proportions: roomier pad, narrower thumb, stretch height via min only. */
    --discover-mobile-card-padding: 0.625rem;
    --discover-mobile-card-gap: 0.625rem;
    --discover-mobile-card-thumb-width: 4.75rem;
    --discover-mobile-card-thumb-min-height: 4.5rem;
    --discover-mobile-font-xs: 0.75rem;
    --discover-mobile-font-sm: 0.8125rem;
    --discover-mobile-font-md: 0.9375rem;
    --discover-mobile-shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.08);
    --discover-mobile-overlay-max-height: min(31rem, calc(100dvh - max(4.75rem, env(safe-area-inset-top, 0px)) - max(1rem, env(safe-area-inset-bottom, 0px))));
    --discover-mobile-modal-max-height: min(34rem, calc(100dvh - max(3rem, env(safe-area-inset-top, 0px)) - max(1rem, env(safe-area-inset-bottom, 0px))));
    --discover-mobile-modal-content-max-height: min(22rem, calc(100dvh - max(10rem, env(safe-area-inset-top, 0px)) - max(1rem, env(safe-area-inset-bottom, 0px))));
  }
}

@media (max-width: 360px) {
  body.discover-page {
    --discover-popover-padding-x: 0.625rem;
    --discover-popover-padding-y: 0.4375rem;
    --discover-popover-item-padding-y: 0.4rem;
    --discover-popover-item-padding-x: 0.5rem;
    --discover-popover-item-radius: 0.5625rem;
    --discover-mobile-edge: max(0.5rem, env(safe-area-inset-left, 0px));
    --discover-mobile-edge-right: max(0.5rem, env(safe-area-inset-right, 0px));
    --discover-mobile-control-height: 2.125rem;
    --discover-mobile-touch-target: 2.375rem;
    --discover-mobile-panel-padding: 0.5rem;
    --discover-mobile-overlay-inline-gap: 0.5rem;
    --discover-mobile-overlay-header-padding: 0.5rem;
    --discover-mobile-overlay-content-padding: 0.5rem;
    --discover-mobile-overlay-footer-padding: 0.5rem;
    --discover-mobile-card-thumb-width: 4.25rem;
    --discover-mobile-card-thumb-min-height: 4rem;
    --discover-mobile-overlay-max-height: min(29rem, calc(100dvh - max(4.5rem, env(safe-area-inset-top, 0px)) - max(0.75rem, env(safe-area-inset-bottom, 0px))));
    --discover-mobile-modal-max-height: min(31rem, calc(100dvh - max(2.5rem, env(safe-area-inset-top, 0px)) - max(0.75rem, env(safe-area-inset-bottom, 0px))));
    --discover-mobile-modal-content-max-height: min(20rem, calc(100dvh - max(9rem, env(safe-area-inset-top, 0px)) - max(0.75rem, env(safe-area-inset-bottom, 0px))));
  }
}

.dark body.discover-page,
body.dark.discover-page,
.dark body.guest-discover-chrome,
body.dark.guest-discover-chrome {
  --discover-premium-ink: #fafaf9;
  --discover-premium-ink-soft: #e7e5e4;
  --discover-premium-muted: #a8a29e;
  --discover-premium-line: rgba(120, 113, 108, 0.42);
  --discover-premium-line-strong: rgba(168, 162, 158, 0.42);
  --discover-premium-surface: rgba(28, 25, 23, 0.96);
  --discover-premium-surface-solid: #1c1917;
  --discover-premium-surface-soft: rgba(41, 37, 36, 0.94);
  --discover-logo-scrim: rgba(28, 25, 23, 0.88);
  --discover-premium-wash: #292524;
  --discover-premium-hover: rgba(68, 64, 60, 0.88);
  --discover-premium-active: rgba(231, 229, 228, 0.1);
  --discover-premium-shadow: 0 24px 62px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.28);
  --discover-premium-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 36px rgba(0, 0, 0, 0.3);
  --discover-premium-focus: 0 0 0 3px rgba(168, 162, 158, 0.2), 0 12px 28px rgba(0, 0, 0, 0.28);
  --discover-topbar-bg: var(--discover-premium-surface);
  --discover-topbar-border: var(--discover-premium-line);
  --discover-topbar-shadow: var(--discover-premium-shadow-soft);
  --discover-topbar-extension-bg: var(--discover-premium-surface-soft);
  --discover-surface-card: var(--discover-premium-surface-solid);
  --discover-glass-strong: var(--discover-premium-surface);
  --discover-glass-medium: var(--discover-premium-surface-soft);
  --discover-glass-soft: rgba(41, 37, 36, 0.76);
  --discover-glass-map: var(--discover-premium-surface);
  --discover-glass-map-active: var(--discover-premium-surface-solid);
  --discover-listings-panel-bg-dark: var(--discover-premium-surface);
  --discover-listings-panel-border-dark: var(--discover-premium-line);
  --discover-control-bg-dark: var(--discover-premium-surface-solid);
  --discover-control-bg-hover-dark: var(--discover-premium-hover);
  --discover-control-bg-active-dark: var(--discover-premium-active);
  --discover-control-border-dark: var(--discover-premium-line);
  --discover-control-border-hover-dark: var(--discover-premium-line-strong);
  --discover-control-text-dark: var(--discover-premium-ink-soft);
  --discover-control-text-strong-dark: var(--discover-premium-ink);
  --discover-control-text-muted-dark: var(--discover-premium-muted);
  --discover-popover-bg-dark: var(--discover-premium-surface-solid);
  --discover-popover-bg-dark-elevated: var(--discover-premium-surface-soft);
  --discover-popover-border-dark: var(--discover-premium-line);
  --discover-popover-hover-dark: var(--discover-premium-hover);
  --discover-popover-active-dark: var(--discover-premium-active);
  --discover-chrome-surface: var(--discover-premium-surface);
  --discover-chrome-surface-solid: var(--discover-premium-surface-solid);
  --discover-chrome-surface-muted: var(--discover-premium-surface-soft);
  --discover-chrome-border: var(--discover-premium-line);
  --discover-chrome-border-strong: var(--discover-premium-line-strong);
  --discover-chrome-text: var(--discover-premium-ink);
  --discover-chrome-muted: var(--discover-premium-muted);
  --discover-chrome-shadow-panel: var(--discover-premium-shadow);
  --discover-chrome-shadow-card: var(--discover-premium-shadow-soft);
  --discover-chrome-shadow-card-hover: 0 16px 38px rgba(0, 0, 0, 0.36);
}