/*
 * patina.css — 釩鏈 ALLOYLINK 銹青 Patina 深色主題（全站共用）
 *
 * 由來：首頁與四個估價頁各自把同一套色票內嵌一份，導致登入、註冊、需求列表、
 * pricing、後台一直停在舊的淺色版（#f4f6f9 底 + 紅 #D12329 / 深藍 #1a2b49）。
 * 抽成單一檔案是為了讓「下一頁又漏掉」這件事不會再發生。
 *
 * 命名刻意沿用舊頁既有的 --red / --navy：
 *   舊版 --red  = #D12329（正紅）      → 銹鐵橙 #B5502E
 *   舊版 --navy = #1a2b49（深藍）      → 暖白 #ECE6DA
 * 這樣舊頁大量的 color:var(--navy) 會自動變成深底上的正確文字色。
 *
 * ⚠ 但 --navy 在舊頁同時被拿來當「文字色」和「底色」兩種相反用途。
 *   background:var(--navy) 在這裡會變成淺色底 —— 那些地方必須逐一改成
 *   var(--surface) / var(--bg-recessed)，不能整批取代。
 */

:root {
    /* 主色 */
    --red:        #B5502E;   /* 鏽鐵橙：主要動作、強調 */
    --red-dark:   #96422A;
    --rust:       #B5502E;
    --rust-hover: #96422A;

    /* 次要色 */
    --verdigris:  #6B8B7A;   /* 銅綠：完成、成功、次要動作 */
    --brass:      #A9884B;   /* 黃銅：Pro 方案 */
    --steel:      #8A9199;   /* 鐵灰：Elite 方案 */

    /* 底色分層（暖炭灰）*/
    --bg:            #1C1A17;
    --bg-base:       #1C1A17;
    --bg-recessed:   #171512;   /* 比底更沉：topbar、footer */
    --surface:       #24221D;   /* 卡片、面板 */
    --bg-panel:      #24221D;
    --surface-2:     #2A2822;   /* 面板內的次層：表頭、hover */
    --bg-panel-alt:  #2A2822;
    --field-bg:      #1A1815;   /* 輸入框 */

    /* 文字 */
    --navy:      #ECE6DA;   /* 舊名保留：現在是主要文字色 */
    --ink:       #ECE6DA;
    --ink-mid:   #A39C8D;
    --ink-dim:   #6B6558;
    --ink-faint: #6B6558;

    /* 線 */
    --line:      #3A362F;
    --line-soft: #2A2822;

    /* 狀態 */
    --danger-bg:     #2A1F1B;
    --danger-line:   #5A3226;
    --success-bg:    #1F2A24;
    --success-line:  #3E4A42;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    background: var(--bg);
    color: var(--ink);
}

/* ── 深色化補正 ──
   表單控制項、捲軸、日期選擇器在深色底下若不指定，瀏覽器會給淺色預設值，
   結果是白底白字這種完全不可讀的組合。這一段必須全站生效。 */
input, select, textarea {
    background: var(--field-bg);
    color: var(--ink);
    border-color: var(--line);
}
input:focus, select:focus, textarea:focus { border-color: var(--red); outline: none; }
select option, select optgroup { background: var(--field-bg); color: var(--ink); }
::placeholder { color: var(--ink-dim); opacity: 1; }
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--red); }
hr { border-color: var(--line); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #4A453C; }

::selection { background: rgba(181,80,46,0.35); color: var(--ink); }

/* ── 共用外殼 ──
   estimate 頁已經定型的樣式，搬過來讓其餘頁面直接沿用同一個外觀。
   頁面自己的 <style> 排在這之後，需要微調時仍蓋得掉。 */
.topbar {
    background: var(--bg-recessed); color: var(--ink-mid);
    border-bottom: 1px solid var(--line);
    padding: 6px 24px; font-size: 11px;
    display: flex; justify-content: flex-end; gap: 24px;
}
.topbar a { color: var(--ink-mid); text-decoration: none; letter-spacing: 0.05em; }
.topbar a:hover { color: var(--red); }

.main-nav { background: var(--surface); border-bottom: 1px solid var(--line); }
.main-nav-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 64px;
    display: flex; align-items: center; justify-content: space-between;
}
.logo {
    font-size: 22px; font-weight: 900; color: var(--ink);
    text-decoration: none; letter-spacing: -0.05em;
}
.logo span { color: var(--red); }

.hero {
    background: linear-gradient(180deg, #211F1A 0%, var(--bg) 100%);
    color: var(--ink); border-bottom: 1px solid var(--line);
    padding: 40px 24px; text-align: center;
}
.hero .tag {
    font-size: 10px; font-weight: bold; letter-spacing: 0.3em;
    color: var(--red); margin-bottom: 10px; text-transform: uppercase;
}
/* 共用樣式表只統一「顏色」，字級與間距留給各頁自己決定。
   用 :where() 包住是因為它不貢獻權重 —— 頁面的 .hero h1 / .hero-sub 一定贏得過。
   先前寫成 .hero h1:not([class]) 反而更高（:not 會累加 [class] 的權重），
   把 pricing 的大標壓成 28px，正是這種共用表最容易踩的坑。 */
.hero :where(h1) { color: var(--ink); }
.hero :where(p)  { color: var(--ink-mid); }

.error-msg {
    background: var(--danger-bg); border: 1px solid var(--danger-line);
    color: var(--red); font-size: 13px; padding: 10px 14px;
    border-radius: 3px; display: none;
}
.error-msg.show { display: block; }