/* 設計系統：所有顏色、間距、字級的單一真實來源 */
/* 為什麼：CLAUDE.MD 規定禁止直接寫色碼，一律引用變數，改主題只需改此檔 */
:root {
    /* 主色：金 + 黑 + 白（呼應啟盛物業 logo 金屬質感） */
    --color-primary: #b8921f;          /* 主金（按鈕 / 連結 / 強調） */
    --color-primary-dark: #96710f;       /* 深金（hover / 漸層末端） */
    --color-primary-light: #f5eed6;    /* 淺金奶油（背景襯底 / chip） */
    --color-accent: #1a1a1a;           /* 品牌黑（標題 / 導覽字色） */
    --color-gold-bright: #c9a227;      /* 亮金（搜尋按鈕 / 聯絡字色） */
    --color-gold-bright-hover: #b8921f;
    --color-gold-highlight: #e8c547;   /* 頁尾連結 hover / 裝飾金 */
    --color-banner-tagline: #000000;   /* 內頁橫幅副標字色（黑字白邊） */
    --color-page-banner-subtitle: #824a12; /* plain 橫幅副標字色 */
    --color-contact-icon: #c9a227;     /* 聯絡頁圖示 */
    --color-about-intro-heading: #ba8c00; /* 關於我們分段標題 */
    --color-about-service-icon: #d6a100;  /* 關於我們服務圖示 */

    /* 頁首導覽專用（金底黑字，對齊 logo 橫幅） */
    --color-header-bg: #ba8e1e;
    --color-header-nav-bg: #ffd957;
    --color-header-nav-bg-light: #fff0b0; /* 選單列漸層淺金 */
    --color-header-nav-bg-deep: #f0c84a;  /* 選單列漸層深金 */
    --header-nav-bg-gradient: linear-gradient(
        180deg,
        var(--color-header-nav-bg-light) 0%,
        var(--color-header-nav-bg) 52%,
        var(--color-header-nav-bg-deep) 100%
    );
    --color-header-hover: #e8d5a3;
    --color-header-text: #1a1a1a;
    --color-header-border: #ffffff;
    --color-brand-tagline-label: #ce9600;
    --color-brand-tagline-text: #3a2700; /* 頁首專營字色 */
    --color-brand-tagline-stroke: rgba(255, 255, 255, 0.5); /* 專營字白色描邊（50% 透明） */
    --text-shadow-brand-tagline:
        -1px -1px 0 var(--color-brand-tagline-stroke),
         1px -1px 0 var(--color-brand-tagline-stroke),
        -1px  1px 0 var(--color-brand-tagline-stroke),
         1px  1px 0 var(--color-brand-tagline-stroke),
         0   -1px 0 var(--color-brand-tagline-stroke),
         0    1px 0 var(--color-brand-tagline-stroke),
        -1px  0   0 var(--color-brand-tagline-stroke),
         1px  0   0 var(--color-brand-tagline-stroke);
    /* tagline：淡金洗底（無紋理盒），避免小區塊貼 menubg 顯得雜亂 */
    --brand-tagline-bg: linear-gradient(
        90deg,
        rgba(255, 240, 176, 0) 0%,
        rgba(255, 217, 87, 0.55) 18%,
        rgba(255, 217, 87, 0.7) 50%,
        rgba(240, 200, 74, 0.55) 82%,
        rgba(255, 240, 176, 0) 100%
    );
    --color-header-contact-icon: #ce9600;
    --color-mobile-nav-active: #d69700;
    --color-mobile-nav-icon: var(--color-mobile-nav-active);
    --color-top-fav-icon: #ffc522;
    --color-nav-toggle: #d38f01;
    --color-nav-link-hover: #9f630f; /* 桌面導覽主選單 hover 字色 */
    --color-nav-submenu-link-hover: #000000; /* 桌面導覽子選單 hover 字色 */
    --color-nav-submenu-link-hover-bg: #faf8f3bf; /* 桌面導覽子選單 hover 底 */
    --color-nav-submenu-bg: #ffd443; /* 桌面導覽子選單背景 */
    --color-nav-submenu-bg-light: #fff0b8; /* 子選單漸層淺金 */
    --color-nav-submenu-bg-deep: #f0c430; /* 子選單漸層深金 */
    --nav-submenu-bg-gradient: linear-gradient(
        180deg,
        var(--color-nav-submenu-bg-light) 0%,
        var(--color-nav-submenu-bg) 52%,
        var(--color-nav-submenu-bg-deep) 100%
    );
    --color-nav-submenu-border: var(--color-white); /* 桌面導覽子選單邊框 */
    --color-firsthand-tab-active: #ffce29;
    --color-mobilesearch-keyword-bg: #ffdc77;
    --color-mobilesearch-keyword-text: #000000;
    --color-mobilesearch-submit-bg: #d4a21f;
    --color-mobilesearch-deal-active-bg: #d4a21f;
    --color-mobilesearch-deal-active-text: var(--color-white);

    /* Hero / 深色疊層 */
    --color-hero-overlay-start: rgba(26, 26, 26, 0.78);
    --color-hero-overlay-end: rgba(150, 113, 15, 0.72);
    --color-overlay-dark: rgba(0, 0, 0, 0.7);
    --color-overlay-dark-soft: rgba(0, 0, 0, 0.6);
    --color-banner-nav-bg: rgba(255, 255, 255, 0.82);
    --color-banner-thumb-bg: rgba(255, 255, 255, 0.82);
    --color-banner-panel-backdrop: rgba(0, 0, 0, 0.65);
    --color-banner-title: #ffd237;
    --color-banner-slider-bg: var(--color-agent-panel-bg);
    --width-banner-panel: 21.875rem;
    --width-banner-thumb: 6.25rem;
    --height-banner-thumb-img: 4rem;
    --max-height-banner-thumb: 7.25rem;
    --height-banner-stage: 17.8125rem;
    --padding-banner-panel: 1.25rem;

    /* 屋苑推介 / 卡片裝飾 */
    --color-estate-border: #e0cfa0;
    --color-estate-name: #c9a227;
    --color-chip-warm: #f0e0c0;
    --color-chip-warm-text: #2f2f2f;

    --color-white: #ffffff;
    --color-bg: #ffffff;               /* 頁面底色 */
    --color-bg-soft: #faf8f3;          /* 區塊淺底（暖白） */
    --color-agent-photo-bg: #ececec;   /* 代理頭像淺灰底 */
    --color-agent-panel-bg: #f5f5f5;   /* 代理推介區塊底 */
    --color-agent-name: #aa7306;       /* 代理推介卡片姓名 */
    --color-agent-section-title: #262626; /* 主內容區塊標題（代理推介、筍盤、成交等） */
    --color-agent-tab-inactive: #e5d29b;  /* 代理推介售租分頁未選中（舊版保留） */
    --color-agent-tab-count-bg: rgba(0, 0, 0, 0.08);
    --color-agent-tab-count-bg-active: rgba(0, 0, 0, 0.12);
    --color-agent-profile-text: #2e2e2e;  /* 代理推介簡介文字 */
    --color-recruit-role: #b17c12;        /* 加入我們職位名稱 */
    --color-recruit-apply-lead: #353535;  /* 加入我們申請表引言 */
    --color-listprop-subtitle-line: #f1d16f; /* 網上放盤表單標題底線 */
    --color-search-deal-active: #ffce29;   /* 側欄搜尋售租切換選中底 */
    --color-myfav-tab-active-bg: #ffce29;  /* 收藏頁 Tab 選中底 */
    --color-myfav-tab-active-text: #000000; /* 收藏頁 Tab 選中字色 */
    --color-myfav-panel-border: #e8c652;   /* 收藏頁表單面板邊框 */
    --color-search-pagination-active-bg: #ffe089; /* 搜尋結果分頁選中底 */
    --color-home-sidebar-search-submit: #dbbd5d; /* 首頁側欄搜尋按鈕底 */
    --color-search-submit-hover: #e8d186;         /* 搜尋按鈕 hover 底 */
    --color-promo-price: #e82727;          /* 筍盤推介樓盤卡價錢 */
    --color-search-card-price: #e82727;    /* 搜尋結果樓盤卡價錢 */
    --color-pd-price: #e82727;             /* 樓盤詳情售價／租金 */
    --color-pd-mortgage-title-bg: #f3ead0; /* 詳情頁按揭計算標題底 */
    --color-search-result-count: #da9a00;
    --color-tran-search-title-bg: #ffdf79; /* 成交搜尋表單標題底 */
    --color-tran-trends-select-bg: #fedf74; /* 價格走勢地區下拉底 */
    --color-tran-list-head-border: #e1d1a5; /* 成交列表表頭底線 */
    --color-usefullink-section-bg: #f6f6f6;
    --color-usefullink-section-title: #a97d00; /* 搜尋結果筆數強調色 */
    --text-shadow-maincontent-title: 0 1px 2px rgba(0, 0, 0, 0.12); /* 主內容區塊標題淡陰影 */
    --color-agent-count-bg: #be9c60;   /* 代理推介樓盤數底條 */
    --color-maincontent-panel-more-bg: #eacd89; /* 首頁區塊「更多...」按鈕底 */
    --color-maincontent-panel-more-bg-hover: #ffeaab; /* 首頁區塊「更多...」按鈕 hover 底 */
    --color-agent-list-search-bg: #f0f0f0; /* 代理列表搜尋列底 */
    --color-agent-list-search-submit: #c3a34e; /* 代理列表搜尋按鈕底 */
    --color-tran-text: #232323;        /* 最新成交列表字色（同 refsite） */
    --color-tran-price: #d20000;       /* 最新成交價錢字色 */
    --color-tran-panel-bg: #f4f0e3;    /* 最新成交區塊底 */
    --color-tran-panel-border: #9e8b55; /* 最新成交區塊邊框 */
    --color-tran-sep-bg: #ececec;      /* 最新成交列表分隔線淺灰底 */
    --min-width-agent-count: 7.5rem;   /* 代理推介樓盤數標籤最小寬（120px） */
    --color-surface: #ffffff;          /* 卡片表面 */
    --color-surface-overlay: color-mix(in srgb, var(--color-surface) 88%, transparent); /* 浮動列半透明底 */
    --color-pd-agent-actions-bg: #25252573; /* 樓盤詳情代理聯絡按鈕區底 */

    --color-text: #1a1a1a;             /* 主文字（品牌黑） */
    --color-text-soft: #5c5c5c;        /* 次要文字 */
    --color-text-muted: #999999;       /* 提示文字 */
    --color-topnav-text: var(--color-text-soft); /* 麵包屑文字與箭頭 */
    --color-text-dark-gray: #2e2e2e;   /* 深灰連結（如側欄「更多...」） */
    --color-border: #e8e0d0;           /* 分隔線 / 邊框（暖灰金） */

    --color-success: #2e7d32;
    --color-finance-down: #fa0000;
    --color-greenform: var(--color-success);       /* 綠表標籤底色 */
    --color-greenform-text: var(--color-white);    /* 綠表標籤字色 */
    --color-greenform-label: #009908;              /* 樓盤卡「綠表價」字色 */
    --color-hos-chip: #448bd0;                     /* 已補地價標籤底色 */
    --color-hos-chip-text: var(--color-white);     /* 已補地價標籤字色 */
    --color-danger: #c0392b;
    --color-whatsapp: #009437;
    --color-whatsapp-dark: #007a2e;
    --color-agent-tel-btn: #1a73e8;        /* 代理列表電話按鈕字／圖示 */
    --color-agent-tel-btn-dark: #1557b0;     /* 代理列表電話按鈕 hover */
    --color-agent-btn-tag-text: #202228;     /* 代理列表 btn-tag 字色（對齊中原） */
    --color-agent-btn-tag-wa-bg: #e2f4e4;   /* 代理列表 WhatsApp 淺綠底 */
    --color-agent-btn-tag-wa-bg-hover: #118678;
    --color-agent-btn-tag-tel-bg: #f0f4f5;   /* 代理列表致電淺灰底 */
    --color-agent-btn-tag-tel-bg-hover: var(--color-agent-tel-btn);
    --color-agent-action-btn-text: var(--color-white); /* 代理列表實心按鈕字色 */
    --color-agent-contact-icon: #c78e29;     /* 代理列表聯絡欄圖示 */
    --color-agent-contact-border: #f6efe0;   /* 代理列表聯絡欄上邊線 */

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

    /* 字級（rem） */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-agent-btn-tag: 0.9375rem;        /* 15px，代理列表 btn-tag 字級 */
    --agent-btn-tag-height: 1.625rem;     /* 26px，代理列表 btn-tag 高度 */
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 3rem;

    /* 字體 */
    --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-agent-btn-tag: 6px;           /* 代理列表 btn-tag 圓角（對齊中原） */
    --radius-md: 8px;
    --radius-agent-panel: 12px;
    --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);
    --shadow-agent-card: 0 2px 8px rgba(0, 0, 0, 0.12);       /* 代理列表卡片陰影 */
    --shadow-agent-card-hover: 0 6px 20px rgba(0, 0, 0, 0.16); /* 代理列表卡片 hover */
    --shadow-header-inner-bar: 0 4px 6px rgba(0, 0, 0, 0.12); /* 手機／平板頁首底陰影 */
    --text-shadow-hero: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.2);

    /* 版面 */
    --container-max: 1500px;
    --container-max-pd: 1400px;
    /* 選單列背景圖 */
    --menu-bg-image: url("/img/menubg.jpg");
    --header-height: calc(4.5rem * 0.7 * 0.75 * 1.1);
    --site-topbar-height: 30px;
    --site-header-brand-height: 6.25rem;
    --site-header-total-height: calc(var(--site-header-brand-height) + var(--header-height));
    --transition: 0.2s ease;
}

/* 簡體：logo 改用 SC 襯線字型 */
html.is-sc,
html[lang="zh-Hans"] {
    --font-logo: "Noto Serif SC", "Songti SC", "STSong", serif;
}

@media (max-width: 1024px) {
    :root {
        /* 手機/平板選單列高度（容納 logo-xs 與漢堡按鈕） */
        --header-height: 3.5rem;
        --site-header-brand-height: 0;
        --site-header-total-height: calc(var(--site-topbar-height) + var(--header-height));
    }
}

@media (max-width: 767px) {
    :root {
        /* 手機橫幅需容納縮圖列與標題面板，高於桌面比例下修後仍要足夠展示主圖 */
        --height-banner-stage: 12rem;
    }
}