/* MJ Property Listing design system tokens — copied from the imported
   Claude Design project "MJ Property Listing Website"
   (mj-airbnb-design-system). Airbnb Cereal VF is proprietary and
   unavailable; Inter is loaded as the open-source substitute per that
   project's own documented approach. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand & Accent */
  --color-primary: #ff385c;
  --color-primary-active: #e00b41;
  --color-primary-disabled: #ffd1da;
  --color-primary-error-text: #c13515;
  --color-primary-error-text-hover: #b32505;
  --color-luxe: #460479;
  --color-plus: #92174d;

  /* Text */
  --color-ink: #222222;
  --color-body: #3f3f3f;
  --color-muted: #6a6a6a;
  --color-muted-soft: #929292;

  /* Hairlines & Borders */
  --color-hairline: #dddddd;
  --color-hairline-soft: #ebebeb;
  --color-border-strong: #c1c1c1;

  /* Surface */
  --color-canvas: #ffffff;
  --color-surface-soft: #f7f7f7;
  --color-surface-card: #ffffff;
  --color-surface-strong: #f2f2f2;

  /* On-color text */
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

  /* Semantic / misc */
  --color-legal-link: #428bff;
  --color-star-rating: #222222;
  --color-scrim: #000000;

  --font-display: 'Inter', 'Circular', -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Circular', -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif;

  --type-display-xl-size: 28px;
  --type-display-xl-weight: 700;
  --type-display-xl-line: 1.43;

  --type-display-lg-size: 22px;
  --type-display-lg-weight: 500;
  --type-display-lg-line: 1.18;
  --type-display-lg-tracking: -0.44px;

  --type-display-md-size: 21px;
  --type-display-md-weight: 700;
  --type-display-md-line: 1.43;

  --type-display-sm-size: 20px;
  --type-display-sm-weight: 600;
  --type-display-sm-line: 1.20;
  --type-display-sm-tracking: -0.18px;

  --type-title-md-size: 16px;
  --type-title-md-weight: 600;
  --type-title-md-line: 1.25;

  --type-title-sm-size: 16px;
  --type-title-sm-weight: 500;
  --type-title-sm-line: 1.25;

  --type-body-md-size: 16px;
  --type-body-md-weight: 400;
  --type-body-md-line: 1.5;

  --type-body-sm-size: 14px;
  --type-body-sm-weight: 400;
  --type-body-sm-line: 1.43;

  --type-caption-size: 14px;
  --type-caption-weight: 500;
  --type-caption-line: 1.29;

  --type-caption-sm-size: 13px;
  --type-caption-sm-weight: 400;
  --type-caption-sm-line: 1.23;

  --type-badge-size: 11px;
  --type-badge-weight: 600;
  --type-badge-line: 1.18;

  --type-button-md-size: 16px;
  --type-button-md-weight: 500;
  --type-button-md-line: 1.25;

  --type-button-sm-size: 14px;
  --type-button-sm-weight: 500;
  --type-button-sm-line: 1.29;

  --type-link-size: 14px;
  --type-link-weight: 400;
  --type-link-line: 1.43;

  --type-nav-link-size: 16px;
  --type-nav-link-weight: 600;
  --type-nav-link-line: 1.25;

  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 64px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  --shadow-card: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0;
  --shadow-none: none;
  --scrim-modal: rgba(0, 0, 0, 0.5);
}

body { margin: 0; background: #ffffff; }
a { color: #222222; text-decoration: none; }
a:hover { color: #e00b41; }