/* 문의 게시판 색 토큰. 화면 CSS(board.css)는 여기 정의한 의미 토큰만 쓴다.
   값의 출처와 대응 규칙: docs/support/03-screen-design.md "색 토큰" */

/* 공통(UmiCorp 디자인 시스템) = Hearlog. 관리 화면도 이 값을 쓴다. 기본은 어두운 테마 */
:root {
  --surface-page: #05070d;
  --surface-card: #0e1218;
  --surface-raised: #151a22;
  --surface-sunken: #080a10;
  --border-subtle: #1f2630;
  --border-control: #5b6675;
  --text-primary: #eef2f5;
  --text-secondary: #b4c3d1;
  --text-tertiary: #8b9bab;
  --accent: #10b981;
  --on-accent: #04150f;
  --accent-text: #6ee7b7;
  --accent-subtle: rgba(16, 185, 129, 0.14);
  --success: #4ade80;
  --danger: #fca5a5;
  --danger-solid: #b42318;
  --on-danger: #ffffff;
  --focus-ring: #10b981;
  --scrim: rgba(3, 6, 12, 0.74);
  --shadow-tab: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --surface-page: #f5f7f6;
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eaefed;
  --border-subtle: #dce3e0;
  --border-control: #76847d;
  --text-primary: #0f1a17;
  --text-secondary: #3e4f49;
  --text-tertiary: #5d6c67;
  --accent: #06704e;
  --on-accent: #ffffff;
  --accent-text: #0a6e4d;
  --accent-subtle: rgba(8, 122, 85, 0.1);
  --success: #17763f;
  --danger: #b42318;
  --focus-ring: #06704e;
  --scrim: rgba(15, 26, 23, 0.38);
  --shadow-tab: 0 1px 3px rgba(15, 26, 23, 0.14);
  --shadow-raised: 0 12px 32px rgba(15, 26, 23, 0.14);
  color-scheme: light;
}

/* AutoLotto (Lucky Gloss). 소개 페이지처럼 기본은 밝은 테마 */
:root[data-service="autolotto"] {
  --surface-page: #f6f1e7;
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f1ebdd;
  --border-subtle: #e4dccb;
  --border-control: #6b7280;
  --text-primary: #1e2a44;
  --text-secondary: #4f5869;
  --text-tertiary: #4f5869;
  --accent: #16233f;
  --on-accent: #ffffff;
  --accent-text: #0b6e70;
  --accent-subtle: #d7efee;
  --success: #0b6e70;
  --danger: #b42318;
  --focus-ring: #0f8b8d;
  --scrim: rgba(15, 26, 23, 0.38);
  --shadow-tab: 0 1px 2px rgba(30, 42, 68, 0.06), 0 4px 14px rgba(30, 42, 68, 0.06);
  --shadow-raised: 0 18px 50px rgba(30, 42, 68, 0.14);
  color-scheme: light;
}
:root[data-service="autolotto"][data-theme="dark"] {
  --surface-page: #15161b;
  --surface-card: #1d1e24;
  --surface-raised: #23242b;
  --surface-sunken: #1a1b20;
  --border-subtle: #2e2f36;
  --border-control: #9d988c;
  --text-primary: #ede6d6;
  --text-secondary: #c7c2b6;
  --text-tertiary: #9d988c;
  --accent: #62d6d6;
  --on-accent: #00373a;
  --accent-text: #62d6d6;
  --accent-subtle: rgba(98, 214, 214, 0.12);
  --success: #62d6d6;
  --danger: #fca5a5;
  --focus-ring: #62d6d6;
  --scrim: rgba(3, 6, 12, 0.74);
  --shadow-tab: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-raised: 0 18px 50px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* AutoLotto720 (Neon Vault). 소개 페이지처럼 기본은 밝은 테마 */
:root[data-service="autolotto720"] {
  --surface-page: #eef2f7;
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #e7ecf5;
  --border-subtle: #dbe2ee;
  --border-control: #5c6b85;
  --text-primary: #16233f;
  --text-secondary: #44526d;
  --text-tertiary: #5c6b85;
  --accent: #16233f;
  --on-accent: #ffffff;
  --accent-text: #0a5e37;
  --accent-subtle: #d3f0dd;
  --success: #0a5e37;
  --danger: #b42318;
  --focus-ring: #0e9e57;
  --scrim: rgba(15, 26, 23, 0.38);
  --shadow-tab: 0 1px 2px rgba(22, 35, 63, 0.06), 0 4px 14px rgba(22, 35, 63, 0.06);
  --shadow-raised: 0 18px 50px rgba(22, 35, 63, 0.14);
  color-scheme: light;
}
:root[data-service="autolotto720"][data-theme="dark"] {
  --surface-page: #0e1330;
  --surface-card: #161c3d;
  --surface-raised: #1d2447;
  --surface-sunken: #121836;
  --border-subtle: #2a3350;
  --border-control: #5d6683;
  --text-primary: #e6eaf3;
  --text-secondary: #b9c2d8;
  --text-tertiary: #8f9ab4;
  --accent: #5fe39a;
  --on-accent: #00391d;
  --accent-text: #5fe39a;
  --accent-subtle: rgba(95, 227, 154, 0.12);
  --success: #5fe39a;
  --danger: #fca5a5;
  --focus-ring: #5fe39a;
  --scrim: rgba(3, 6, 12, 0.74);
  --shadow-tab: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-raised: 0 18px 50px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}