/* BondMai Marketplace home only.
   This file bridges older component variables into the BondMai design language
   without changing the frozen marketplace information architecture. */

body:has(.appShell.view-market) {
  --md-sys-color-primary: var(--bm-color-primary, #0f766e);
  --md-sys-color-on-primary: var(--bm-color-on-primary, #ffffff);
  --md-sys-color-primary-container: var(--bm-color-primary-container, #dcf2ee);
  --md-sys-color-on-primary-container: var(--bm-color-on-primary-container, #123f3c);
  --md-sys-color-secondary: var(--bm-color-passport, #223b5d);
  --md-sys-color-secondary-container: var(--bm-color-passport-soft, #e8eef6);
  --md-sys-color-tertiary: var(--bm-color-warning, #ad7426);
  --md-sys-color-surface: var(--bm-color-surface, #ffffff);
  --md-sys-color-surface-container-lowest: var(--bm-color-surface-lowest, #ffffff);
  --md-sys-color-surface-container-low: var(--bm-color-surface-low, #f4f6f3);
  --md-sys-color-surface-container: var(--bm-color-surface-container, #eef2ef);
  --md-sys-color-surface-container-high: var(--bm-color-surface-high, #e8ede9);
  --md-sys-color-surface-container-highest: var(--bm-color-surface-highest, #dfe6e2);
  --md-sys-color-on-surface: var(--bm-color-text, #18211e);
  --md-sys-color-on-surface-variant: var(--bm-color-text-muted, #56635e);
  --md-sys-color-outline: var(--bm-color-outline, #75827c);
  --md-sys-color-outline-variant: var(--bm-color-outline-soft, #d4dcd7);
  --md-sys-color-error: var(--bm-color-error, #b42318);

  --md-sys-shape-corner-extra-small: var(--bm-radius-xs, 6px);
  --md-sys-shape-corner-small: var(--bm-radius-sm, 10px);
  --md-sys-shape-corner-medium: var(--bm-radius-md, 14px);
  --md-sys-shape-corner-large: var(--bm-radius-lg, 20px);
  --md-sys-shape-corner-extra-large: var(--bm-radius-2xl, 36px);
  --md-sys-shape-corner-full: var(--bm-radius-full, 999px);

  --bm-home-max: 1280px;
  --bm-home-pad: 32px;
  --bm-brand-mint: var(--bm-color-mint, #bde5de);
  --bm-brand-mint-soft: var(--bm-color-mint-soft, #eef9f7);
  --bm-brand-cream: var(--bm-color-cream, #f7efe5);
  --bm-brand-passport: var(--bm-color-passport, #223b5d);
  --bm-brand-luggage: var(--bm-color-luggage, #8a654b);
  --bm-brand-coral: var(--bm-color-coral, #e85d68);
  --bm-elevation-0: var(--bm-shadow-none, none);
  --bm-elevation-1: var(--bm-shadow-1, 0 1px 2px rgba(16, 23, 20, .05));
  --bm-elevation-2: var(--bm-shadow-2, 0 10px 30px rgba(16, 23, 20, .08));
  --bm-elevation-3: var(--bm-shadow-3, 0 22px 60px rgba(16, 23, 20, .13));
  --bm-elevation-ai: var(--bm-shadow-ai, 0 22px 62px rgba(15, 118, 110, .18));
  --bm-state-hover: color-mix(in srgb, var(--bm-color-primary) 8%, transparent);
  --bm-coral: var(--bm-brand-coral);

  background: var(--bm-color-surface) !important;
  color: var(--bm-color-text) !important;
}

body:has(.appShell.view-market) .appShell.view-market {
  min-height: 100vh !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), transparent 520px),
    var(--bm-color-surface) !important;
  color: var(--bm-color-text) !important;
  font-family: var(--bm-font-sans, Inter, "Noto Sans TC", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif) !important;
}

body:has(.appShell.view-market) :where(button, input, select, textarea) {
  font: inherit !important;
}

body:has(.appShell.view-market) :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bm-color-primary) 38%, transparent) !important;
  outline-offset: 3px !important;
}