/* =========================================================
   色系設定：要換顏色只改這個檔案
   - 介面（HTML）與 3D 場景都讀同一組變數
   - 新增色系：複製一組 [data-theme="xxx"]，再到 assets/js/app.js 的 THEMES 加上 id 與名稱
   ========================================================= */

/* 預設：鉅潞紅（取自 grnet.com.tw 品牌色） */
:root,
:root[data-theme="grnet"] {
  /* 品牌色 */
  --c-primary: #d6422a;
  --c-ink: #222222;
  --c-cream: #ffffff;
  --c-yellow: #ffd36b;
  --c-stone: #c9c2bd;
  --c-green: #0e6135;

  /* 標籤色：data.json 的 tags 用 "color": "tag-1" 指定 */
  --tag-1: #d6422a;
  --tag-2: #2f6fc0;
  --tag-3: #1f7a4d;
  --tag-4: #e0961f;

  /* 背景與 3D 場景 */
  --c-bg-top: #fafafa;
  --c-bg-bottom: #f1e6e1;
  --c-fog: #f1e6e1;
  --c-water: #a9c5ca;
  --c-foam: #ffffff;
  --c-land: #c3d4a6;
  --c-sand: #ecdcc2;
  --c-plaza: #e4dbd3;
  --c-cliff: #a9978b;
  --c-wall: #ffffff;
  --c-roof: #d6422a;
  --c-tree: #4f7a5a;
  --c-trunk: #6e5442;
  --c-link: #c22020;
  --light-sky: #fff6f2;
  --light-ground: #c9c2bd;
  --light-sun: #fff4ea;
  --sky-intensity: 1.6;
  --sun-intensity: 2.4;

  /* 介面 */
  --ui-surface: rgba(255, 255, 255, 0.95);
  --ui-text: #222222;
  --ui-muted: #666666;
  --ui-line: rgba(34, 34, 34, 0.12);
  --ui-accent: var(--c-primary);
  --ui-on-accent: #ffffff;
  --ui-shadow: 0 10px 30px rgba(34, 34, 34, 0.12);
}

:root[data-theme="coral"] {
  /* 品牌色 */
  --c-primary: #db6a41;
  --c-ink: #211d1d;
  --c-cream: #fff8f4;
  --c-yellow: #fcea8b;
  --c-stone: #c5b5a7;
  --c-green: #71806a;

  /* 標籤色 */
  --tag-1: #db6a41;
  --tag-2: #7a6fb0;
  --tag-3: #3e7c8c;
  --tag-4: #5e9a6f;

  /* 背景與 3D 場景 */
  --c-bg-top: #fff8f4;
  --c-bg-bottom: #f5dfd0;
  --c-fog: #f5dfd0;
  --c-water: #9ec8c3;
  --c-foam: #fff8f4;
  --c-land: #bccf9c;
  --c-sand: #e6d2ad;
  --c-plaza: #ddccb6;
  --c-cliff: #b8977a;
  --c-wall: #fff8f4;
  --c-roof: #db6a41;
  --c-tree: #71806a;
  --c-trunk: #8a6a4e;
  --c-link: #db6a41;
  --light-sky: #fff3e8;
  --light-ground: #c5b5a7;
  --light-sun: #fff1e0;
  --sky-intensity: 1.6;
  --sun-intensity: 2.4;

  /* 介面 */
  --ui-surface: rgba(255, 248, 244, 0.94);
  --ui-text: #211d1d;
  --ui-muted: #6f625b;
  --ui-line: rgba(33, 29, 29, 0.12);
  --ui-accent: var(--c-primary);
  --ui-on-accent: #fff8f4;
  --ui-shadow: 0 10px 30px rgba(33, 29, 29, 0.12);
}

:root[data-theme="ocean"] {
  --c-primary: #2f6fb0;
  --c-ink: #14243a;
  --c-cream: #f5f9fc;
  --c-yellow: #ffe28a;
  --c-stone: #b3c2cf;
  --c-green: #4f7f6a;

  --tag-1: #e07a4f;
  --tag-2: #6a5fc0;
  --tag-3: #2f6fb0;
  --tag-4: #3f9a72;

  --c-bg-top: #f5f9fc;
  --c-bg-bottom: #d3e4f1;
  --c-fog: #d3e4f1;
  --c-water: #7fb3d6;
  --c-foam: #f5f9fc;
  --c-land: #a9cba2;
  --c-sand: #e9dfc6;
  --c-plaza: #d4dde6;
  --c-cliff: #8ea3b6;
  --c-wall: #f5f9fc;
  --c-roof: #2f6fb0;
  --c-tree: #4f7f6a;
  --c-trunk: #7a6450;
  --c-link: #2f6fb0;
  --light-sky: #eef6ff;
  --light-ground: #b3c2cf;
  --light-sun: #ffffff;
  --sky-intensity: 1.6;
  --sun-intensity: 2.3;

  --ui-surface: rgba(245, 249, 252, 0.94);
  --ui-text: #14243a;
  --ui-muted: #55657a;
  --ui-line: rgba(20, 36, 58, 0.12);
  --ui-accent: var(--c-primary);
  --ui-on-accent: #ffffff;
  --ui-shadow: 0 10px 30px rgba(20, 36, 58, 0.14);
}

:root[data-theme="night"] {
  --c-primary: #f2a65a;
  --c-ink: #f1ece4;
  --c-cream: #2a3047;
  --c-yellow: #ffd76a;
  --c-stone: #3b4360;
  --c-green: #5f8c74;

  --tag-1: #f2a65a;
  --tag-2: #a99bf0;
  --tag-3: #5fb3c8;
  --tag-4: #6cc08f;

  --c-bg-top: #10131f;
  --c-bg-bottom: #1d2236;
  --c-fog: #1d2236;
  --c-water: #24395a;
  --c-foam: #6f86ad;
  --c-land: #4d6b5a;
  --c-sand: #7a6c58;
  --c-plaza: #5d6278;
  --c-cliff: #3b4360;
  --c-wall: #d9d3c7;
  --c-roof: #f2a65a;
  --c-tree: #3f6a55;
  --c-trunk: #5a4636;
  --c-link: #ffd76a;
  --light-sky: #8ea2d8;
  --light-ground: #20263a;
  --light-sun: #c9d4ff;
  --sky-intensity: 1.1;
  --sun-intensity: 1.2;

  --ui-surface: rgba(24, 28, 44, 0.94);
  --ui-text: #f1ece4;
  --ui-muted: #a5abc0;
  --ui-line: rgba(241, 236, 228, 0.14);
  --ui-accent: var(--c-primary);
  --ui-on-accent: #10131f;
  --ui-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Fish 藍：取自 fishtoyo.github.io 的深藍色調 */
:root[data-theme="fish"] {
  --c-primary: #164e81;
  --c-ink: #0f1c2b;
  --c-cream: #f5f9fc;
  --c-yellow: #ffd36b;
  --c-stone: #b7c3cf;
  --c-green: #3f7f6e;

  --tag-1: #164e81;
  --tag-2: #287e94;
  --tag-3: #e0961f;
  --tag-4: #d6603a;

  --c-bg-top: #f5f9fc;
  --c-bg-bottom: #dbe6ef;
  --c-fog: #dbe6ef;
  --c-water: #8fb5d0;
  --c-foam: #f5f9fc;
  --c-land: #b8cfa6;
  --c-sand: #e8dcc6;
  --c-plaza: #d8e0e8;
  --c-cliff: #8e9cab;
  --c-wall: #f9fbfd;
  --c-roof: #164e81;
  --c-tree: #3f7f6e;
  --c-trunk: #6b5646;
  --c-link: #287e94;
  --light-sky: #f0f6ff;
  --light-ground: #b7c3cf;
  --light-sun: #ffffff;
  --sky-intensity: 1.6;
  --sun-intensity: 2.3;

  --ui-surface: rgba(249, 251, 253, 0.95);
  --ui-text: #0f1c2b;
  --ui-muted: #56677a;
  --ui-line: rgba(15, 28, 43, 0.12);
  --ui-accent: var(--c-primary);
  --ui-on-accent: #ffffff;
  --ui-shadow: 0 10px 30px rgba(8, 38, 66, 0.14);
}