/* 設計系統：所有顏色、間距、字級的單一真實來源 */
/* 為什麼：CLAUDE.MD 規定禁止直接寫色碼，一律引用變數，改主題只需改此檔 */
:root {
    /* 主色：品牌紅（logo #E60412）+ 白 */
    --color-primary: #E60412;
    --color-primary-dark: #B8030E;     /* 深色（hover / 強調） */
    --color-primary-light: #FAD1D4;    /* 淺色（背景襯底） */
    --color-btn: var(--color-primary);
    --color-btn-dark: var(--color-primary-dark);
    --color-accent: #f4a300;           /* 點綴金（標籤 / 評級） */
    --color-header-bg: #48234c;        /* 頁首列底色 */
    --color-purple-light: #e8d8ee;     /* 村屋分類標籤淺紫底 */
    --color-purple-gradient-start: #b374cb; /* 村屋分類標籤漸變起點 */
    --color-logo-light: #e6cb7b;       /* 頁尾品牌文字金色 */
    --color-header-slogan: #ffdb15;    /* 頁首服務口號金黃 */
    --color-header-slogan-bg: #281237; /* Header slogan dark-purple background */
    --color-header-phone: #d9d9d9;     /* 頁首電話淺灰 */
    --color-section-title-accent: #8f00a4; /* 區段標題底線紫色 */
    --color-nav-underline: #ffd965;    /* 頁首導覽底線金色 */
    --color-nav-hover: #ffd966;        /* 頁首導覽懸停文字金色 */
    --color-search-deal-active: #834b89; /* 搜尋買租切換啟用底色 */
    --color-property-chip-bg: var(--color-header-bg); /* Property type chip dark purple */
    --color-property-chip-text: #ffe6b4; /* Property type chip light gold */
    --color-property-price: #5f2a64; /* Property card price text */
    --color-banner-slogan: #ffc557; /* Home banner slogan gold (mid) */
    --color-banner-slogan-light: #ffefc3; /* Slogan gradient light (top) */
    --color-banner-slogan-dark: #b78003; /* Slogan gradient dark (bottom) */
    --color-banner-desc: #ffca66; /* Home banner desc gold (mid) */
    --color-banner-desc-light: #fff0c7; /* Desc gradient light (top) */
    --color-banner-desc-dark: #d9a223; /* Desc gradient dark (bottom) */
    --color-header-phone-mid: #ffd17b; /* Header phone text gradient mid */
    --color-header-phone-dark: #d7aa42; /* Header phone text gradient dark */
    --color-about-primary: #834b89;     /* About page primary purple */
    --color-about-primary-light: #e8d8ee; /* About page light purple */
    --color-property-detail-primary: #834b89; /* Property detail primary purple */
    --color-property-detail-primary-light: #e8d8ee; /* Property detail light purple */

    --color-white: #ffffff;
    --color-bg: #ffffff;               /* 頁面底色 */
    --color-bg-soft: #fdf5f5;          /* 區塊淺底 */
    --color-bg-muted: #f1f1f1;         /* 篩選列中性淺底 */
    --color-surface: #ffffff;          /* 卡片表面 */
    --color-surface-overlay: color-mix(in srgb, var(--color-surface) 88%, transparent); /* 浮動列半透明底 */

    --color-text: #222222;             /* 主文字 */
    --color-text-dark: #373737;        /* 篩選鈕等偏深文字 */
    --color-text-nav: #2e2e2e;         /* 手機選單次選文字 */
    --color-text-mid: #5b5b5b;         /* 頁面副標等中性灰 */
    --color-text-soft: #666666;        /* 次要文字 */
    --color-text-muted: #999999;       /* 提示文字 */
    --color-border: #eaeaea;           /* 分隔線 / 邊框 */
    --color-border-strong: #d7d7d7;    /* 表頭等較明顯分隔線 */

    --color-success: #2e7d32;
    --color-finance-up: #86efac;       /* 財經列上漲（淺綠，深色頂欄對比） */
    --color-finance-down: #d62828;     /* 財經列下跌（維持紅色） */
    --color-error: #d62828;            /* 表單錯誤提示 */
    --color-danger: var(--color-primary);

    /* 深色頁尾配色 */
    --color-footer-bg: #1a1a1a;
    --color-footer-text: #cccccc;
    --color-footer-muted: #999999;
    --color-footer-border: #333333;
    --color-footer-copy: #777777;
    --color-footer-title-accent: #975dd2;

    /* 字級（rem） */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 3rem;

    /* 字體 */
    --font-body: "Roboto", "Noto Sans", "Microsoft JhengHei", "PingFang TC", sans-serif;
    --font-logo: "Noto Serif TC", "Songti TC", "STSong", serif;

    /* 間距（rem） */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;

    /* 圓角與陰影 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);
    --text-shadow-hero: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.2);

    /* 版面 */
    --container-max: 1200px;
    --header-height: 4.5rem;
    --transition: 0.2s ease;
}