/* 唯一 Web 色彩來源；角色與換色規則見 docs/design-tokens.md 第十一節。 */
:root {
  /* 骨幹色（design-tokens.md 第一節） */
  --brand: #A3E3CC;
  --brand-soft: #E6F4F0;
  --action: #2E7D72;
  --action-strong: #1F5B53;
  --ink: #2B0F02;
  --ink-2: #4A3226;
  --ink-3: #5C4636;          /* 文字可用的最淺色（白底 8.81:1），再淺一律不得用於文字 */
  --base: #FDFCF8;
  --surface: #FFFFFF;
  --line: #EBE4D9;
  --mascot-halo: transparent; /* 吉祥物外緣的光暈：淺色不需要；深色底上深咖啡描邊會融掉，深色色票改成淺色光暈 */
  --on-brand: #2B0F02;        /* brand 底上的字：淺色是深咖啡；深色模式 brand 仍是亮色，字必須是深色（不能用 --ink，深色的 ink 是亮色） */

  /* 語意色（第二節） */
  --expense: #B2503C;
  --expense-soft: #FBEFEB;
  --income: #2E7D72;         /* 固定收入語意，不隨主題 action 變色 */
  --income-soft: #E6F4F0;
  --warn: #9A6B12;
  --warn-soft: #FBDF9B;      /* 只能當底色，永遠不能當文字色（白底 1.39:1） */
  --info: #3D6FA8;
  --info-soft: #EAF1F9;

  /* 停用（第四節） */
  --disabled-soft: #F2EFE8;
  --disabled-ink: #A79688;

  /* 圖表配色（第五節）。相鄰兩色的明度必須拉開 */
  --chart-1: #2E7D72;
  --chart-2: #71CFC6;
  --chart-3: #FBDF9B;
  --chart-4: #EFB6A5;
  --chart-5: #A3E3CC;
  --chart-6: #3D6FA8;
  --chart-other: #C9BCAF;

  /* 固定會員等級色，不隨主題切換 */
  --tier-1-from: #2E7D72;
  --tier-1-to: #1F5B53;
  --tier-2-from: #1F5B53;
  --tier-2-to: #4A3226;
  --tier-3-from: #B2503C;
  --tier-3-to: #4A3226;
  --tier-4-from: #9A6B12;
  --tier-4-to: #4A3226;
  --on-tier: #FFFFFF;        /* 會員等級卡上的文字；等級漸層固定深色，不能用 --surface */

  /* 遮罩與陰影：固定深色，不能用 --ink（深色模式的 ink 是亮色） */
  --scrim: rgba(43, 15, 2, 0.6);
  --shadow-color: 43, 15, 2;
  /* 開關關閉時的外圈與旋鈕；深色底上要夠亮才看得出來，所以深色區塊另設 */
  --switch-ring: var(--disabled-ink);
  --switch-knob: var(--surface);

  color-scheme: light;
}

/* 深色模式（design-tokens.md 第十三節）。角色與用途不變，只換色值；行內 style 與頁面也都吃這組 token。
   使用者在設定頁「資料管理」區塊的〈外觀〉磚選的外觀由 theme.js 寫成 <html data-theme>：
   - 沒有 data-theme（跟隨系統）：由下面的 media query 決定；
   - data-theme="dark"：不管系統設定，一律深色；data-theme="light"：一律用最上面那組淺色。
   兩個深色區塊的內容必須完全一樣，src/themeCss.test.ts 會擋。
   新增色卡：照 theme.js 檔頭的步驟加 :root[data-theme="<id>"] 區塊。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --brand: #A3E3CC;
    --brand-soft: #1F3A35;
    --action: #5FC4B4;
    --action-strong: #8FDACB;
    --ink: #F3EDE4;
    --ink-2: #D8CFC2;
    --ink-3: #BDB1A2;
    --base: #14120F;
    --surface: #1E1B17;
    --line: #3A342C;

    --expense: #F0907C;
    --expense-soft: #3A211C;
    --income: #5FC4B4;
    --income-soft: #1F3A35;
    --warn: #E3B04F;
    --warn-soft: #4A3A14;
    --info: #7FAEE0;
    --info-soft: #1C2A3B;

    --disabled-soft: #26221D;
    --disabled-ink: #8A7E71;

    --chart-1: #4FB3A3;
    --chart-6: #6C9BD0;
    --chart-other: #8C8176;

    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-color: 0, 0, 0;
    --switch-ring: #BDB1A2;
    --switch-knob: #F3EDE4;

    --on-brand: #14120F;
    --mascot-halo: rgba(255, 255, 255, 0.75);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --brand: #A3E3CC;
  --brand-soft: #1F3A35;
  --action: #5FC4B4;
  --action-strong: #8FDACB;
  --ink: #F3EDE4;
  --ink-2: #D8CFC2;
  --ink-3: #BDB1A2;
  --base: #14120F;
  --surface: #1E1B17;
  --line: #3A342C;

  --expense: #F0907C;
  --expense-soft: #3A211C;
  --income: #5FC4B4;
  --income-soft: #1F3A35;
  --warn: #E3B04F;
  --warn-soft: #4A3A14;
  --info: #7FAEE0;
  --info-soft: #1C2A3B;

  --disabled-soft: #26221D;
  --disabled-ink: #8A7E71;

  --chart-1: #4FB3A3;
  --chart-6: #6C9BD0;
  --chart-other: #8C8176;

  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-color: 0, 0, 0;
  --switch-ring: #BDB1A2;
  --switch-knob: #F3EDE4;

  --on-brand: #14120F;
  --mascot-halo: rgba(255, 255, 255, 0.75);
  color-scheme: dark;
}

/* ===== 更多色卡（design-tokens.md 第十三節「新增色卡」）。淺色組只換強調色四個；深色組換整套中性色與強調色，語意色沿用深色那組。 ===== */

:root[data-theme="pink"] {
  --brand: #F7CFD8;
  --brand-soft: #FCEBEF;
  --action: #A8466A;
  --action-strong: #7C3050;
}

:root[data-theme="cream"] {
  --brand: #F5E7A1;
  --brand-soft: #FBF4D3;
  --action: #7A6A1F;
  --action-strong: #55490F;
}

:root[data-theme="aqua"] {
  --brand: #A6D6D6;
  --brand-soft: #E4F3F3;
  --action: #2F7274;
  --action-strong: #1F5153;
}

:root[data-theme="lavender"] {
  --brand: #8E7DBE;
  --brand-soft: #EEEAF7;
  --action: #6C5A9E;
  --action-strong: #4D3E7A;
}

:root[data-theme="dream"] {
  --brand: #F7CFD8;
  --brand-soft: #F4F2DE;
  --action: #6C5A9E;
  --action-strong: #4D3E7A;
}

:root[data-theme="morandi"] {
  --brand: #D8CCC0;
  --brand-soft: #F1EBE4;
  --action: #6F5F52;
  --action-strong: #4B3F36;
}

:root[data-theme="pinknight"] {
  --base: #1D1418;
  --surface: #281C21;
  --line: #432F37;
  --ink: #F8EEF1;
  --ink-2: #D6BFC7;
  --ink-3: #B9A0AA;
  --brand: #F7CFD8;
  --brand-soft: #35232B;
  --action: #F2A9BE;
  --action-strong: #F8C8D5;
  --income-soft: #35232B;
  --income: #F2A9BE;
  --switch-ring: #B9A0AA;
  --switch-knob: #F8EEF1;
  --expense: #F0907C;
  --expense-soft: #3A211C;
  --warn: #E3B04F;
  --warn-soft: #4A3A14;
  --info: #7FAEE0;
  --info-soft: #1C2A3B;
  --disabled-soft: #26221D;
  --disabled-ink: #8A7E71;
  --chart-1: #4FB3A3;
  --chart-6: #6C9BD0;
  --chart-other: #8C8176;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-color: 0, 0, 0;
  --on-brand: #14120F;
  --mascot-halo: rgba(255, 255, 255, 0.75);
  color-scheme: dark;
}

:root[data-theme="creamnight"] {
  --base: #191813;
  --surface: #23221A;
  --line: #3B3A2A;
  --ink: #F6F4E6;
  --ink-2: #D3CFAE;
  --ink-3: #B5B18F;
  --brand: #F5E7A1;
  --brand-soft: #2F2D1C;
  --action: #EBDD85;
  --action-strong: #F5EBB0;
  --income-soft: #2F2D1C;
  --income: #EBDD85;
  --switch-ring: #B5B18F;
  --switch-knob: #F6F4E6;
  --expense: #F0907C;
  --expense-soft: #3A211C;
  --warn: #E3B04F;
  --warn-soft: #4A3A14;
  --info: #7FAEE0;
  --info-soft: #1C2A3B;
  --disabled-soft: #26221D;
  --disabled-ink: #8A7E71;
  --chart-1: #4FB3A3;
  --chart-6: #6C9BD0;
  --chart-other: #8C8176;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-color: 0, 0, 0;
  --on-brand: #14120F;
  --mascot-halo: rgba(255, 255, 255, 0.75);
  color-scheme: dark;
}

:root[data-theme="aquanight"] {
  --base: #121A1A;
  --surface: #1B2626;
  --line: #2E4141;
  --ink: #E9F5F5;
  --ink-2: #BCD6D6;
  --ink-3: #9FBEBE;
  --brand: #A6D6D6;
  --brand-soft: #223636;
  --action: #8FD0D0;
  --action-strong: #B6E4E4;
  --income-soft: #223636;
  --income: #8FD0D0;
  --switch-ring: #9FBEBE;
  --switch-knob: #E9F5F5;
  --expense: #F0907C;
  --expense-soft: #3A211C;
  --warn: #E3B04F;
  --warn-soft: #4A3A14;
  --info: #7FAEE0;
  --info-soft: #1C2A3B;
  --disabled-soft: #26221D;
  --disabled-ink: #8A7E71;
  --chart-1: #4FB3A3;
  --chart-6: #6C9BD0;
  --chart-other: #8C8176;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-color: 0, 0, 0;
  --on-brand: #14120F;
  --mascot-halo: rgba(255, 255, 255, 0.75);
  color-scheme: dark;
}

:root[data-theme="lavendernight"] {
  --base: #17141F;
  --surface: #211D2C;
  --line: #382F4A;
  --ink: #F0ECF8;
  --ink-2: #C8BFDC;
  --ink-3: #AB9FC4;
  --brand: #8E7DBE;
  --brand-soft: #2C2540;
  --action: #B9ABE0;
  --action-strong: #D3C8F0;
  --income-soft: #2C2540;
  --income: #B9ABE0;
  --switch-ring: #AB9FC4;
  --switch-knob: #F0ECF8;
  --expense: #F0907C;
  --expense-soft: #3A211C;
  --warn: #E3B04F;
  --warn-soft: #4A3A14;
  --info: #7FAEE0;
  --info-soft: #1C2A3B;
  --disabled-soft: #26221D;
  --disabled-ink: #8A7E71;
  --chart-1: #4FB3A3;
  --chart-6: #6C9BD0;
  --chart-other: #8C8176;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-color: 0, 0, 0;
  --on-brand: #14120F;
  --mascot-halo: rgba(255, 255, 255, 0.75);
  color-scheme: dark;
}

:root[data-theme="dreamnight"] {
  --base: #17141D;
  --surface: #221E2B;
  --line: #383046;
  --ink: #F2EEF7;
  --ink-2: #C9C0D6;
  --ink-3: #AC9FC0;
  --brand: #F7CFD8;
  --brand-soft: #2E2639;
  --action: #B9ABE0;
  --action-strong: #D3C8F0;
  --income-soft: #223636;
  --income: #A6D6D6;
  --switch-ring: #AC9FC0;
  --switch-knob: #F2EEF7;
  --expense: #F0907C;
  --expense-soft: #3A211C;
  --warn: #E3B04F;
  --warn-soft: #4A3A14;
  --info: #7FAEE0;
  --info-soft: #1C2A3B;
  --disabled-soft: #26221D;
  --disabled-ink: #8A7E71;
  --chart-1: #4FB3A3;
  --chart-6: #6C9BD0;
  --chart-other: #8C8176;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-color: 0, 0, 0;
  --on-brand: #14120F;
  --mascot-halo: rgba(255, 255, 255, 0.75);
  color-scheme: dark;
}

:root[data-theme="morandinight"] {
  --base: #171513;
  --surface: #211E1B;
  --line: #38332E;
  --ink: #EFEAE4;
  --ink-2: #C9C0B6;
  --ink-3: #ABA196;
  --brand: #D8CCC0;
  --brand-soft: #2E2924;
  --action: #CDBBA7;
  --action-strong: #E3D6C6;
  --income-soft: #2E2924;
  --income: #CDBBA7;
  --switch-ring: #ABA196;
  --switch-knob: #EFEAE4;
  --expense: #F0907C;
  --expense-soft: #3A211C;
  --warn: #E3B04F;
  --warn-soft: #4A3A14;
  --info: #7FAEE0;
  --info-soft: #1C2A3B;
  --disabled-soft: #26221D;
  --disabled-ink: #8A7E71;
  --chart-1: #4FB3A3;
  --chart-6: #6C9BD0;
  --chart-other: #8C8176;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-color: 0, 0, 0;
  --on-brand: #14120F;
  --mascot-halo: rgba(255, 255, 255, 0.75);
  color-scheme: dark;
}