/* Generated by scripts/build-tokens.mjs from tokens/*.json. Do not edit by hand. */

:root {
  color-scheme: light;
  --color-white: #FFFFFF;
  --color-paper: #FCFAF6;
  --color-black: #000000;
  --color-navy-50: #F3F7FE;
  --color-navy-100: #E6EDFC;
  --color-navy-200: #CEDBF8;
  --color-navy-300: #A8BDED;
  --color-navy-400: #7F99DA;
  --color-navy-500: #5C76C0;
  --color-navy-600: #4158A1;
  --color-navy-700: #314380;
  --color-navy-800: #223062;
  --color-navy-900: #172046;
  --color-navy-950: #0D142F;
  --color-amber-50: #FFF8ED;
  --color-amber-100: #FFEED4;
  --color-amber-200: #FFDBAD;
  --color-amber-300: #FEBE73;
  --color-amber-400: #F39C43;
  --color-amber-500: #DF8028;
  --color-amber-600: #BE651D;
  --color-amber-700: #9A4E1C;
  --color-amber-800: #773917;
  --color-amber-900: #582911;
  --color-amber-950: #3D1C0D;
  --color-stone-50: #F8F5F1;
  --color-stone-100: #F0ECE7;
  --color-stone-200: #E1DDD7;
  --color-stone-300: #CDC8C2;
  --color-stone-400: #ACA7A0;
  --color-stone-500: #7F838B;
  --color-stone-600: #5F636C;
  --color-stone-700: #444953;
  --color-stone-800: #2C313D;
  --color-stone-900: #191E2A;
  --color-stone-950: #0C101B;
  --color-green-50: #EDFBF2;
  --color-green-100: #DCF6E6;
  --color-green-200: #BBECCE;
  --color-green-300: #8BD8AB;
  --color-green-400: #56BC86;
  --color-green-500: #2A9D67;
  --color-green-600: #0E8050;
  --color-green-700: #0E653F;
  --color-green-800: #075030;
  --color-green-900: #063A23;
  --color-green-950: #052918;
  --color-red-50: #FFF4F3;
  --color-red-100: #FEE6E5;
  --color-red-200: #FFCFCC;
  --color-red-300: #FEA6A0;
  --color-red-400: #F17871;
  --color-red-500: #DE4E49;
  --color-red-600: #C1332F;
  --color-red-700: #9C2623;
  --color-red-800: #7C1D1A;
  --color-red-900: #5D1512;
  --color-red-950: #430F0D;
  --color-bg-canvas: var(--color-paper); /* 頁面底色：暖白灰泥，不用純白。 */
  --color-bg-surface: var(--color-white); /* 卡片、面板、輸入框。 */
  --color-bg-raised: var(--color-white); /* 選單、浮層、對話框。 */
  --color-bg-sunken: var(--color-stone-50); /* 凹陷區塊、表格斑馬紋、圖片佔位。 */
  --color-bg-muted: var(--color-stone-100); /* 標籤、滑過時的底色。 */
  --color-bg-brand: var(--color-navy-800); /* 主要按鈕、品牌色塊。 */
  --color-bg-brand-hover: var(--color-navy-900);
  --color-bg-brand-subtle: var(--color-navy-50);
  --color-bg-accent: var(--color-amber-400); /* 亮著的那盞燈。一個畫面一處。 */
  --color-bg-accent-subtle: var(--color-amber-50);
  --color-bg-inverse: var(--color-navy-900); /* 頁尾、淺色模式中的深色區塊。 */
  --color-text-primary: var(--color-stone-900); /* 內文：暖白紙上的藍墨。 */
  --color-text-heading: var(--color-navy-900);
  --color-text-secondary: var(--color-stone-600); /* 輔助文字。白底對比 6.0:1。 */
  --color-text-tertiary: var(--color-stone-500); /* 只用於佔位與停用文字（對比低於 4.5:1）。 */
  --color-text-brand: var(--color-navy-800);
  --color-text-link: var(--color-navy-600);
  --color-text-link-hover: var(--color-navy-800);
  --color-text-price: var(--color-amber-700); /* 租金與金額。白底對比 6.0:1。 */
  --color-text-on-brand: var(--color-white);
  --color-text-on-accent: var(--color-navy-950);
  --color-text-inverse: var(--color-stone-50);
  --color-border-default: var(--color-stone-200);
  --color-border-strong: var(--color-stone-300);
  --color-border-brand: var(--color-navy-800);
  --color-border-focus: var(--color-navy-500); /* 鍵盤焦點框：對底色 4.2:1。 */
  --color-icon-default: var(--color-navy-800);
  --color-icon-muted: var(--color-stone-400); /* 沒有提供的設備：燈是熄的。 */
  --color-icon-accent: var(--color-amber-400); /* 圖示的亮燈處：有提供。 */
  --color-status-success: var(--color-green-600);
  --color-status-success-subtle: var(--color-green-50);
  --color-status-warning: var(--color-amber-700);
  --color-status-warning-subtle: var(--color-amber-50);
  --color-status-danger: var(--color-red-600);
  --color-status-danger-subtle: var(--color-red-50);
  --color-status-info: var(--color-navy-600);
  --color-status-info-subtle: var(--color-navy-50);
  --color-listing-available: var(--color-green-600); /* 可租 */
  --color-listing-reserved: var(--color-amber-700); /* 已預訂 / 洽談中 */
  --color-listing-rented: var(--color-stone-500); /* 已出租 */
  --color-listing-new: var(--color-amber-400); /* 「最新」標籤底色 */
  --color-listing-featured: var(--color-navy-800); /* 「精選」標籤底色 */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-section: clamp(64px, 50.7px + 3.54vw, 96px); /* 頁面段落之間的垂直間距。 */
  --space-gutter: clamp(16px, 12.7px + 0.88vw, 24px); /* 頁面左右留白與欄間距。 */
  --size-icon-sm: 16px;
  --size-icon: 24px;
  --size-icon-lg: 32px;
  --size-control-sm: 32px;
  --size-control: 44px; /* 按鈕與輸入框的預設高度，也是最小觸控尺寸。 */
  --size-control-lg: 52px;
  --size-container: 1200px;
  --size-container-narrow: 760px; /* 長文閱讀寬度。 */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px; /* 按鈕、輸入框、標籤。 */
  --radius-lg: 12px; /* 卡片。 */
  --radius-xl: 16px; /* 抽屜、大型面板。 */
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --shadow-sm: 0px 1px 2px 0px #1720460F, 0px 1px 1px 0px #1720460A;
  --shadow-md: 0px 4px 12px -2px #17204614, 0px 2px 4px 0px #1720460A; /* 滑過的卡片。 */
  --shadow-lg: 0px 16px 40px -12px #17204624, 0px 4px 10px 0px #1720460F; /* 浮層、固定的搜尋列。 */
  --shadow-xl: 0px 24px 64px -16px #17204633, 0px 8px 20px -4px #17204614; /* 對話框。 */
  --duration-instant: 80ms;
  --duration-fast: 140ms; /* 滑過、按下。 */
  --duration-base: 220ms; /* 大多數轉場。 */
  --duration-slow: 360ms; /* 面板、抽屜。 */
  --duration-slower: 560ms; /* 頁面層級的出現效果。 */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --font-sans: "Manrope Variable", "Noto Sans TC Variable", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; /* 預設。英數用 Manrope，中文用思源黑體。 */
  --font-cjk: "Noto Sans TC Variable", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; /* 中文優先。長篇中文裡的英數也用思源黑體。 */
  --font-numeric: "Manrope Variable", system-ui, sans-serif; /* 價格、坪數、樓層、電話。 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-caption: 12px; /* 中文可讀的最小字級。 */
  --font-size-small: 14px;
  --font-size-body: 16px;
  --font-size-body-lg: 18px;
  --font-size-title-sm: 20px;
  --font-size-title: clamp(21px, 19.76px + 0.33vw, 24px);
  --font-size-headline: clamp(25px, 22.52px + 0.66vw, 31px);
  --font-size-display: clamp(31px, 26.86px + 1.1vw, 41px);
  --font-size-display-xl: clamp(38px, 30.55px + 1.99vw, 56px);
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8; /* 中文內文。 */
  --tracking-tight: -0.01em; /* 大尺寸數字。 */
  --tracking-normal: 0em;
  --tracking-cjk: 0.02em; /* 中文內文稍微拉開。 */
  --tracking-heading: 0.04em;
  --tracking-caps: 0.16em; /* 英文全大寫標籤。 */
}

/* Dark theme is opt-in: set data-theme="dark" on <html>. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas: var(--color-stone-950);
  --color-bg-surface: var(--color-stone-900);
  --color-bg-raised: var(--color-stone-800);
  --color-bg-sunken: #11151F;
  --color-bg-muted: var(--color-stone-800);
  --color-bg-brand: var(--color-navy-300);
  --color-bg-brand-hover: var(--color-navy-200);
  --color-bg-brand-subtle: #1A2340;
  --color-bg-accent: var(--color-amber-400);
  --color-bg-accent-subtle: #2A1D10;
  --color-bg-inverse: var(--color-stone-50);
  --color-text-primary: var(--color-stone-50);
  --color-text-heading: #FFFFFF;
  --color-text-secondary: var(--color-stone-300);
  --color-text-tertiary: var(--color-stone-400);
  --color-text-brand: var(--color-navy-300);
  --color-text-link: var(--color-navy-300);
  --color-text-link-hover: var(--color-navy-200);
  --color-text-price: var(--color-amber-300);
  --color-text-on-brand: var(--color-navy-950);
  --color-text-on-accent: var(--color-navy-950);
  --color-text-inverse: var(--color-stone-900);
  --color-border-default: #2A2F3A;
  --color-border-strong: var(--color-stone-700);
  --color-border-brand: var(--color-navy-300);
  --color-border-focus: var(--color-amber-300);
  --color-icon-default: var(--color-stone-100);
  --color-icon-muted: var(--color-stone-600);
  --color-icon-accent: var(--color-amber-400);
  --color-status-success: var(--color-green-400);
  --color-status-success-subtle: #0B2418;
  --color-status-warning: var(--color-amber-300);
  --color-status-warning-subtle: #2A1D10;
  --color-status-danger: var(--color-red-400);
  --color-status-danger-subtle: #2C1212;
  --color-status-info: var(--color-navy-300);
  --color-status-info-subtle: #1A2340;
  --color-listing-available: var(--color-green-400);
  --color-listing-reserved: var(--color-amber-300);
  --color-listing-rented: var(--color-stone-400);
  --color-listing-new: var(--color-amber-400);
  --color-listing-featured: var(--color-navy-300);
}

.text-display-xl {
  font-family: var(--font-sans);
  font-size: var(--font-size-display-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
}

.text-display {
  font-family: var(--font-sans);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-heading);
}

.text-headline {
  font-family: var(--font-sans);
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  letter-spacing: var(--tracking-heading);
}

.text-title {
  font-family: var(--font-sans);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.text-title-sm {
  font-family: var(--font-sans);
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.text-body-lg {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  letter-spacing: var(--tracking-cjk);
}

.text-body {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  letter-spacing: var(--tracking-cjk);
}

.text-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.text-small {
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  letter-spacing: var(--tracking-cjk);
}

.text-caption {
  font-family: var(--font-sans);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.text-overline {
  font-family: var(--font-numeric);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-caps);
}

.text-price {
  font-family: var(--font-numeric);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.text-price-lg {
  font-family: var(--font-numeric);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}