/*
 * BondMai Design Tokens v2
 * Direction: Apple HIG interaction quality × Airbnb warmth × Linear clarity.
 * Compatibility aliases are included for the existing marketplace components.
 */

:root {
  color-scheme: light;

  /* Brand primitives */
  --bm-color-mint-50: #eef9f7;
  --bm-color-mint-100: #dcf2ee;
  --bm-color-mint-200: #bde5de;
  --bm-color-mint-300: #8fd0c5;
  --bm-color-mint-400: #55b2a5;
  --bm-color-mint-500: #218f83;
  --bm-color-mint-600: #0f766e;
  --bm-color-mint-700: #0c5f59;
  --bm-color-mint-800: #104d49;
  --bm-color-mint-900: #123f3c;

  --bm-color-passport: #223b5d;
  --bm-color-passport-soft: #e8eef6;
  --bm-color-coral: #e85d68;
  --bm-color-coral-hover: #d94e5a;
  --bm-color-coral-soft: #fff0f1;
  --bm-color-cream: #f7efe5;
  --bm-color-sand: #eadcc9;
  --bm-color-gold: #c6933f;
  --bm-color-gold-soft: #fbf3df;
  --bm-color-luggage: #8a654b;

  /* Neutrals */
  --bm-color-ink-950: #101714;
  --bm-color-ink-900: #18211e;
  --bm-color-ink-800: #26312d;
  --bm-color-ink-700: #3b4944;
  --bm-color-ink-600: #56635e;
  --bm-color-ink-500: #6f7b76;
  --bm-color-ink-400: #929c98;
  --bm-color-ink-300: #b8c0bd;
  --bm-color-ink-200: #d9dfdc;
  --bm-color-ink-100: #ecefed;
  --bm-color-ink-50: #f6f7f5;
  --bm-color-white: #ffffff;

  /* Semantic */
  --bm-color-primary: var(--bm-color-mint-600);
  --bm-color-primary-hover: var(--bm-color-mint-700);
  --bm-color-on-primary: #ffffff;
  --bm-color-primary-container: var(--bm-color-mint-100);
  --bm-color-on-primary-container: var(--bm-color-mint-900);
  --bm-color-accent: var(--bm-color-coral);
  --bm-color-accent-hover: var(--bm-color-coral-hover);
  --bm-color-accent-soft: var(--bm-color-coral-soft);
  --bm-color-warning: #ad7426;
  --bm-color-warning-soft: #fff7e8;
  --bm-color-error: #b42318;
  --bm-color-error-soft: #fff1f0;
  --bm-color-success: #15735f;
  --bm-color-success-soft: #eaf7f2;

  --bm-color-bg: #f7f7f4;
  --bm-color-background: var(--bm-color-bg);
  --bm-color-surface: #ffffff;
  --bm-color-surface-card: #ffffff;
  --bm-color-surface-soft: #f1f4f1;
  --bm-color-surface-lowest: #ffffff;
  --bm-color-surface-low: #f4f6f3;
  --bm-color-surface-container: #eef2ef;
  --bm-color-surface-high: #e8ede9;
  --bm-color-surface-highest: #dfe6e2;
  --bm-color-text: var(--bm-color-ink-900);
  --bm-color-text-strong: var(--bm-color-ink-950);
  --bm-color-text-muted: var(--bm-color-ink-600);
  --bm-color-text-subtle: var(--bm-color-ink-500);
  --bm-color-border: #dde3df;
  --bm-color-border-hover: #c8d1cc;
  --bm-color-outline: #75827c;
  --bm-color-outline-soft: #d4dcd7;
  --bm-color-divider: rgba(24, 33, 30, 0.09);

  /* Legacy palette aliases */
  --bm-color-mint: var(--bm-color-mint-200);
  --bm-color-mint-soft: var(--bm-color-mint-50);
  --bm-color-emerald: var(--bm-color-mint-600);
  --bm-color-emerald-light: var(--bm-color-mint-500);
  --bm-color-emerald-dark: var(--bm-color-mint-800);
  --bm-color-rose: var(--bm-color-coral);
  --bm-color-rose-soft: var(--bm-color-coral-soft);
  --bm-color-slate-900: var(--bm-color-ink-900);
  --bm-color-slate-800: var(--bm-color-ink-800);
  --bm-color-slate-700: var(--bm-color-ink-700);
  --bm-color-slate-500: var(--bm-color-ink-500);
  --bm-color-slate-400: var(--bm-color-ink-400);
  --bm-color-slate-200: var(--bm-color-ink-200);
  --bm-color-slate-100: var(--bm-color-ink-100);
  --bm-color-slate-50: var(--bm-color-ink-50);

  /* Typography */
  --bm-font-sans: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bm-font-display: Outfit, Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --bm-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --bm-letter-spacing: -0.012em;

  --bm-type-display-size: clamp(3.3rem, 5.4vw, 5rem);
  --bm-type-display-line: 0.98;
  --bm-type-display-weight: 760;
  --bm-type-title-size: 1.125rem;
  --bm-type-title-line: 1.2;
  --bm-type-title-weight: 700;
  --bm-type-title-large-size: clamp(1.35rem, 2vw, 1.75rem);
  --bm-type-title-large-line: 1.2;
  --bm-type-section-size: clamp(1.75rem, 2.7vw, 2.35rem);
  --bm-type-section-line: 1.16;
  --bm-type-headline-size: clamp(1.8rem, 2.8vw, 2.45rem);
  --bm-type-headline-line: 1.14;
  --bm-type-headline-weight: 720;
  --bm-type-body-size: 1rem;
  --bm-type-body-line: 1.65;
  --bm-type-body-weight: 430;
  --bm-type-small-size: 0.875rem;
  --bm-type-caption-size: 0.75rem;
  --bm-type-label-size: 0.75rem;
  --bm-type-label-line: 1.35;
  --bm-type-label-weight: 680;
  --bm-type-support-size: 0.8125rem;
  --bm-type-support-line: 1.5;
  --bm-type-support-weight: 470;

  /* Spacing */
  --bm-space-0: 0;
  --bm-space-1: 4px;
  --bm-space-2: 8px;
  --bm-space-3: 12px;
  --bm-space-4: 16px;
  --bm-space-5: 20px;
  --bm-space-6: 24px;
  --bm-space-7: 28px;
  --bm-space-8: 32px;
  --bm-space-10: 40px;
  --bm-space-12: 48px;
  --bm-space-14: 56px;
  --bm-space-16: 64px;
  --bm-space-20: 80px;
  --bm-space-24: 96px;
  --bm-space-28: 112px;
  --bm-space-32: 128px;

  /* Shape */
  --bm-radius-xs: 6px;
  --bm-radius-sm: 10px;
  --bm-radius-md: 14px;
  --bm-radius-lg: 20px;
  --bm-radius-xl: 28px;
  --bm-radius-2xl: 36px;
  --bm-radius-full: 999px;

  /* Elevation */
  --bm-shadow-none: none;
  --bm-shadow-1: 0 1px 2px rgba(16, 23, 20, 0.05), 0 6px 18px rgba(16, 23, 20, 0.04);
  --bm-shadow-2: 0 10px 30px rgba(16, 23, 20, 0.08), 0 2px 8px rgba(16, 23, 20, 0.04);
  --bm-shadow-3: 0 22px 60px rgba(16, 23, 20, 0.13), 0 6px 18px rgba(16, 23, 20, 0.06);
  --bm-shadow-4: 0 36px 90px rgba(16, 23, 20, 0.18);
  --bm-shadow-ai: 0 22px 62px rgba(15, 118, 110, 0.18), 0 4px 16px rgba(16, 23, 20, 0.06);
  --bm-shadow-focus: 0 0 0 4px rgba(15, 118, 110, 0.18);
  --bm-shadow-subtle: var(--bm-shadow-1);
  --bm-shadow-md: var(--bm-shadow-2);
  --bm-shadow-lg: var(--bm-shadow-3);
  --bm-shadow-glow: 0 0 0 6px rgba(15, 118, 110, 0.11);
  --bm-shadow-accent-glow: 0 16px 40px rgba(232, 93, 104, 0.24);
  --bm-shadow-coral: 0 12px 28px rgba(232, 93, 104, 0.22);

  /* Glass: restricted to floating chrome */
  --bm-glass-bg: rgba(255, 255, 255, 0.84);
  --bm-glass-bg-hover: rgba(255, 255, 255, 0.94);
  --bm-glass-border: rgba(255, 255, 255, 0.74);
  --bm-glass-shadow: 0 12px 40px rgba(16, 23, 20, 0.09);
  --bm-glass-blur: blur(22px) saturate(1.12);

  /* Controls */
  --bm-control-height-sm: 36px;
  --bm-control-height-md: 44px;
  --bm-control-height-lg: 52px;
  --bm-button-height-small: var(--bm-control-height-sm);
  --bm-button-height: var(--bm-control-height-md);
  --bm-button-height-large: var(--bm-control-height-lg);
  --bm-button-padding-inline: 18px;
  --bm-button-gap: 8px;
  --bm-button-radius: var(--bm-radius-md);
  --bm-button-font-size: 0.875rem;
  --bm-button-font-weight: 680;
  --bm-input-height: var(--bm-control-height-lg);

  /* Cards/chips */
  --bm-card-bg: var(--bm-color-surface-card);
  --bm-card-border: 1px solid var(--bm-color-border);
  --bm-card-radius-product: var(--bm-radius-xl);
  --bm-card-radius-country: var(--bm-radius-xl);
  --bm-card-radius-traveler: var(--bm-radius-xl);
  --bm-card-radius-wish: var(--bm-radius-xl);
  --bm-card-radius-ai: var(--bm-radius-2xl);
  --bm-card-media-radius: var(--bm-radius-lg);
  --bm-card-media-scrim: linear-gradient(180deg, transparent 48%, rgba(16, 23, 20, 0.18));
  --bm-card-trust-bg: var(--bm-color-mint-50);
  --bm-card-trust-text: var(--bm-color-mint-800);
  --bm-chip-height: 26px;
  --bm-chip-radius: var(--bm-radius-full);

  /* Motion */
  --bm-duration-fast: 140ms;
  --bm-duration-medium: 220ms;
  --bm-duration-slow: 420ms;
  --bm-duration-ambient: 7200ms;
  --bm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --bm-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --bm-transition-fast: var(--bm-duration-fast) var(--bm-ease-standard);
  --bm-transition-normal: var(--bm-duration-medium) var(--bm-ease-standard);
  --bm-transition-bounce: var(--bm-duration-slow) var(--bm-ease-emphasized);
}

html[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --bm-color-primary: #62c6b8;
  --bm-color-primary-hover: #83d7ca;
  --bm-color-on-primary: #082c29;
  --bm-color-primary-container: #173e39;
  --bm-color-on-primary-container: #d9f6f0;
  --bm-color-accent: #ff8088;
  --bm-color-accent-hover: #ff9aa0;
  --bm-color-accent-soft: #4b252b;
  --bm-color-warning: #e6b568;
  --bm-color-warning-soft: #3b3020;
  --bm-color-error: #ffb4ab;
  --bm-color-error-soft: #4a2220;
  --bm-color-success: #79d5bd;
  --bm-color-success-soft: #163b32;

  --bm-color-bg: #101512;
  --bm-color-background: var(--bm-color-bg);
  --bm-color-surface: #171d1a;
  --bm-color-surface-card: #1a211e;
  --bm-color-surface-soft: #202824;
  --bm-color-surface-lowest: #141916;
  --bm-color-surface-low: #1a211e;
  --bm-color-surface-container: #202824;
  --bm-color-surface-high: #27312c;
  --bm-color-surface-highest: #303c36;
  --bm-color-text: #eef3f0;
  --bm-color-text-strong: #ffffff;
  --bm-color-text-muted: #b1bdb7;
  --bm-color-text-subtle: #93a099;
  --bm-color-border: #33403a;
  --bm-color-border-hover: #485850;
  --bm-color-outline: #94a39c;
  --bm-color-outline-soft: #3b4943;
  --bm-color-divider: rgba(238, 243, 240, 0.09);
  --bm-color-passport: #cfdef2;
  --bm-color-passport-soft: #233044;
  --bm-color-cream: #312a22;
  --bm-color-sand: #4c4034;

  --bm-glass-bg: rgba(23, 29, 26, 0.86);
  --bm-glass-bg-hover: rgba(32, 40, 36, 0.94);
  --bm-glass-border: rgba(255, 255, 255, 0.09);
  --bm-glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);

  --bm-card-trust-bg: #173e39;
  --bm-card-trust-text: #d9f6f0;
  --bm-card-media-scrim: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.44));
}