/* 碳盤查小隊 Design Tokens（規格第 06 節）。只作用於 .cs-game，不影響 CarbonLedger 主系統。
   主題：預設跟隨系統；.cs-game[data-theme] 可由設定覆寫。對比實測見 docs/game-spec/contrast-matrix.md */
.cs-game {
  /* 語意色彩：淺色 */
  --cs-bg: #F6F8F3;
  --cs-surface: #FFFFFF;
  --cs-surface-muted: #EAF0E7;
  --cs-text: #20382C;
  --cs-text-muted: #4D6456;
  --cs-primary: #246B45;
  --cs-on-primary: #FFFFFF;
  --cs-primary-hover: #1B5738;
  --cs-primary-pressed: #14432B;
  --cs-accent: #F2CB70;
  --cs-on-accent: #493408;
  --cs-success: #216B43;
  --cs-success-bg: #E7F4EB;
  --cs-error: #A72C3C;
  --cs-error-bg: #FCECEF;
  --cs-warning: #7A4C00;
  --cs-warning-bg: #FFF3D6;
  --cs-border: #788B7C;
  --cs-divider: #DCE5DB;
  --cs-focus: #1757B8;
  /* 排放類別（長條圖等非文字標記） */
  --cs-scope1: #C2503F;
  --cs-scope2: #C98F12;
  --cs-scope3: #3C7FB8;

  /* 字體與尺寸 */
  --cs-font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --cs-font-display: "Huninn", "Noto Sans TC", sans-serif;
  --cs-text-xs: 0.875rem;
  --cs-text-sm: 1rem;
  --cs-text-md: 1.125rem;
  --cs-text-lg: 1.5rem;
  --cs-text-xl: 2rem;
  --cs-text-hero: clamp(2rem, 5vw, 3rem);
  --cs-leading-body: 1.7;
  --cs-leading-heading: 1.3;

  /* 空間 */
  --cs-space-1: 4px;
  --cs-space-2: 8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-6: 24px;
  --cs-space-8: 32px;
  --cs-space-12: 48px;
  --cs-space-16: 64px;
  --cs-gutter: var(--cs-space-4);

  /* 圓角、邊框、陰影、層級 */
  --cs-radius-control: 12px;
  --cs-radius-card: 20px;
  --cs-radius-panel: 28px;
  --cs-radius-pill: 999px;
  --cs-border-width: 1px;
  --cs-border-selected: 2px;
  --cs-focus-width: 3px;
  --cs-focus-offset: 3px;
  --cs-shadow-card: 0 8px 24px rgb(25 55 35 / 8%);
  /* 3D 群島的天空底色（場景本身的顏色在 island-map.js，不隨主題變） */
  --cs-sky-top: #7cc3ea;
  --cs-sky-low: #d9f0f7;
  --cs-shadow-button: 0 3px 0 #184B30;
  --cs-z-base: 0;
  --cs-z-sticky: 10;
  --cs-z-dialog: 100;
  --cs-z-toast: 110;

  /* 動態與版寬 */
  --cs-duration-fast: 120ms;
  --cs-duration-normal: 200ms;
  --cs-duration-celebrate: 600ms;
  --cs-ease: cubic-bezier(.2, .7, .2, 1);
  --cs-width-page: 1200px;
  --cs-width-task: 760px;
  --cs-hit: 48px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  .cs-game:not([data-theme="light"]) {
    --cs-bg: #121C18;
    --cs-surface: #1D2B24;
    --cs-surface-muted: #26382D;
    --cs-text: #F0F6EE;
    --cs-text-muted: #BCCCBF;
    --cs-primary: #A8E6BD;
    --cs-on-primary: #153522;
    --cs-primary-hover: #BFF2CF;
    --cs-primary-pressed: #8BCFA3;
    --cs-accent: #E6BD66;
    --cs-on-accent: #302004;
    --cs-success: #9FE2B5;
    --cs-success-bg: #193A28;
    --cs-error: #FFB3BC;
    --cs-error-bg: #48222A;
    --cs-warning: #FFD58C;
    --cs-warning-bg: #40331E;
    --cs-border: #809987;
    --cs-divider: #3F5447;
    --cs-focus: #A7CCFF;
    --cs-scope1: #F08A7C;
    --cs-scope2: #E6BD66;
    --cs-scope3: #86B8E8;
    --cs-shadow-card: 0 8px 24px rgb(0 0 0 / 35%);
    --cs-shadow-button: 0 3px 0 #0B1F14;
    color-scheme: dark;
  }
}

.cs-game[data-theme="dark"] {
  --cs-bg: #121C18;
  --cs-surface: #1D2B24;
  --cs-surface-muted: #26382D;
  --cs-text: #F0F6EE;
  --cs-text-muted: #BCCCBF;
  --cs-primary: #A8E6BD;
  --cs-on-primary: #153522;
  --cs-primary-hover: #BFF2CF;
  --cs-primary-pressed: #8BCFA3;
  --cs-accent: #E6BD66;
  --cs-on-accent: #302004;
  --cs-success: #9FE2B5;
  --cs-success-bg: #193A28;
  --cs-error: #FFB3BC;
  --cs-error-bg: #48222A;
  --cs-warning: #FFD58C;
  --cs-warning-bg: #40331E;
  --cs-border: #809987;
  --cs-divider: #3F5447;
  --cs-focus: #A7CCFF;
  --cs-scope1: #F08A7C;
  --cs-scope2: #E6BD66;
  --cs-scope3: #86B8E8;
  --cs-shadow-card: 0 8px 24px rgb(0 0 0 / 35%);
  --cs-shadow-button: 0 3px 0 #0B1F14;
  color-scheme: dark;
}

@media (min-width: 600px) { .cs-game { --cs-gutter: var(--cs-space-6); } }
@media (min-width: 960px) { .cs-game { --cs-gutter: var(--cs-space-8); } }