/*
  root.css — 全站設計變數
  建立：2026-11-03 15:59（Claude（AI 編程員）｜依指揮官指示）
  最後更新：2026-11-03 18:01（Claude（AI 編程員）｜新增頁尾與軟體系統面板色）
  用途：顏色、字型、間距、圓角、動態的唯一來源；組件內嚴禁寫死色碼
  ⚠ STYLE.md 尚未建立，數值定案後以 STYLE.md 為準
  夜間版：跟隨系統設定；使用者手動切換時寫入 html[data-theme]
*/
:root {
  color-scheme: light;

  /* 品牌色：富生達橘，填底專用，一律搭深色字 */
  --color-primary: #F29700;
  --color-primary-2: #F6AE3D;
  --color-primary-ink: #8A5500;     /* 白底上的橘色文字 */
  --color-accent-ink: #8A5500;      /* 依日夜切換的橘色文字：日間深橘、夜間品牌橘 */
  --color-on-primary: #1A1A1A;
  --color-on-primary-2: #3D2800;

  /* 藥丸（選單鈕、選中的切換鈕與頁內導覽）：底色石墨灰，日夜皆同 */
  --color-pill: #676666;
  --color-on-pill: #FFFFFF;

  /* 頁尾（指揮官指定色，日夜皆同） */
  --color-footer: #1F2022;

  /* 深色面板上的文字（日夜皆同） */
  --color-on-dark: #FFFFFF;
  --color-on-dark-2: #D9D9D9;

  /* 中性基礎（日間） */
  --color-ink: #1A1A1A;
  --color-ink-2: #4A4A4A;
  --color-ink-inverse: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-light-1: #EEEEEC;
  --color-light-2: #FAFAF9;
  --color-light-3: #E2E2E0;
  --color-dark-1: #222326;
  --color-dark-2: #3B3C42;

  /* 牆面與地板（首頁展示牆） */
  --color-wall-1: #F2F1EF;
  --color-wall-2: #E3E2DF;
  --color-floor-1: #A3A29F;
  --color-floor-2: #C3C2BF;
  --wall-glow: rgba(255, 255, 255, .55);
  --wall-shade: rgba(0, 0, 0, .05);
  --chip-bg: rgba(255, 255, 255, .7);
  --chip-border: rgba(0, 0, 0, .08);

  /* 物件卡與圖示 */
  --tile-fixed-1: #FFFFFF;          /* 橘、深色底上的白色圖示方塊（日夜皆同） */
  --tile-fixed-2: #F4F4F2;
  --tile-dark-1: #3B3C42;           /* 選單深色圖示方塊（日夜皆同） */
  --tile-dark-2: #1C1D20;
  --tile-img-filter: grayscale(1) contrast(1.05) brightness(1.1);
  --tile-img-blend: multiply;
  --geo-opacity: 1;
  --tile-highlight: rgba(255, 255, 255, .9);

  /* 字型：Inter 由 Google Fonts 載入，中文走系統字 */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;

  /* 間距：基礎 4px */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* 圓角與陰影 */
  --radius-s: .25rem;
  --radius-m: .375rem;
  --radius-l: .5rem;
  --radius-pill: 999px;
  --shadow-panel: 0 1.5rem 3rem -1.75rem rgba(0, 0, 0, .45);

  /* 動態 */
  --ease: cubic-bezier(.22, .8, .2, 1);
  --dur: .7s;
}

/* 夜間版：系統偏好（未手動指定日間時） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-accent-ink: #F29700;
    --color-ink: #F1F1EF;
    --color-ink-2: #B5B5B2;
    --color-ink-inverse: #1A1A1A;
    --color-surface: #3A3B40;
    --color-light-1: #2A2B2F;
    --color-light-2: #34353A;
    --color-light-3: #24252A;
    --color-dark-1: #121315;
    --color-dark-2: #1F2024;
    --color-wall-1: #2C2C2E;
    --color-wall-2: #1E1E20;
    --color-floor-1: #111112;
    --color-floor-2: #19191B;
    --wall-glow: rgba(255, 255, 255, .05);
    --wall-shade: rgba(0, 0, 0, .25);
    --chip-bg: rgba(255, 255, 255, .08);
    --chip-border: rgba(255, 255, 255, .12);
    --tile-img-filter: grayscale(1) brightness(.75);
    --tile-img-blend: screen;
    --geo-opacity: .3;
    --tile-highlight: rgba(255, 255, 255, .08);
    --shadow-panel: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .8);
  }
}

/* 夜間版：手動切換 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-accent-ink: #F29700;
  --color-ink: #F1F1EF;
  --color-ink-2: #B5B5B2;
  --color-ink-inverse: #1A1A1A;
  --color-surface: #3A3B40;
  --color-light-1: #2A2B2F;
  --color-light-2: #34353A;
  --color-light-3: #24252A;
  --color-dark-1: #121315;
  --color-dark-2: #1F2024;
  --color-wall-1: #2C2C2E;
  --color-wall-2: #1E1E20;
  --color-floor-1: #111112;
  --color-floor-2: #19191B;
  --wall-glow: rgba(255, 255, 255, .05);
  --wall-shade: rgba(0, 0, 0, .25);
  --chip-bg: rgba(255, 255, 255, .08);
  --chip-border: rgba(255, 255, 255, .12);
  --tile-img-filter: grayscale(1) brightness(.75);
  --tile-img-blend: screen;
  --geo-opacity: .3;
  --tile-highlight: rgba(255, 255, 255, .08);
  --shadow-panel: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .8);
}

*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}