/*
 * GAME3579 디자인 토큰 — 색상 값은 이 파일에만 둔다 (설계 8.2절).
 * 1층: 원시 팔레트 / 2층: 의미 토큰(다크 기본, 라이트는 [data-theme="light"])
 * 컴포넌트·페이지 CSS 는 2층 토큰만 사용한다 (tests/application/game_theme_test.php 가 검사).
 */
:root {
  /* 1층: 원시 팔레트 */
  --navy-950: #0b1020;
  --navy-900: #0e1323;
  --navy-800: #1b2236;
  --navy-700: #252d45;
  --navy-600: #2c3650;
  --navy-400: #5a6584;
  --navy-200: #9aa4bc;
  --slate-500: #5b6478;
  --slate-400: #8a93a8;
  --slate-200: #e2e7f0;
  --slate-150: #e8ecf4;
  --slate-100: #f5f7fb;
  --ink-900: #172033;
  --white: #ffffff;
  --snow: #f5f7fc;
  --orange-500: #fe6000;
  --orange-600: #c94c00;
  --orange-700: #c2410c;
  --orange-400: #ff7a1a;
  --gold-400: #ffc83d;
  --silver-300: #c9d1e0;
  --bronze-400: #e08a4b;
  --red-500: #eb4137;
  --green-500: #00a85b;

  /* 크기·모양 (테마 무관) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --container: 1200px;
  --gutter: 16px;
  --header-h: 72px;
  --font-body:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-display: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2층: 의미 토큰 — 다크(기본) */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0e1323;
  --c-surface: #1b2236;
  --c-surface-2: #252d45;
  --c-border: #2c3650;
  --c-border-strong: #9ba2b5;
  /* c-border-storng 5A6584 */
  --c-text: #f5f7fc;
  --c-text-muted: #9aa4bc;
  --c-accent: #fe6000;
  --c-accent-strong: #c94c00;
  --c-accent-text: #ff7a1a;
  --c-on-accent: #ffffff;
  --c-focus: #ff7a1a;
  --c-rank-gold: var(--gold-400);
  --c-rank-silver: var(--silver-300);
  --c-rank-bronze: var(--bronze-400);
  --c-star: var(--gold-400);
  --c-danger: var(--red-500);
  --c-success: var(--green-500);
  --c-overlay: rgba(5, 8, 20, 0.72);
  --c-header-bg: rgba(14, 19, 35, 0.92);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* 2층: 의미 토큰 — 라이트 */
:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: #fdfdff;
  --c-surface: #ffffff;
  --c-surface-2: #e8ecf4;
  --c-border: #e2e7f0;
  --c-border-strong: #8a93a8;
  --c-text: #172033;
  --c-text-muted: #5b6478;
  --c-accent: #fe6000;
  --c-accent-strong: #c94c00;
  --c-accent-text: #c2410c;
  --c-on-accent: #ffffff;
  --c-focus: #c2410c;
  --c-rank-gold: #b7791f;
  --c-rank-silver: #6b7488;
  --c-rank-bronze: #b4552b;
  --c-star: #d99a00;
  --c-overlay: rgba(23, 32, 51, 0.55);
  --c-header-bg: rgba(255, 255, 255, 0.92);
  --shadow-card: 0 6px 18px rgba(23, 32, 51, 0.08);
  --shadow-pop: 0 14px 34px rgba(23, 32, 51, 0.16);
}

/* 두 테마 모두 어두운 영역(hero·개발자 배너) — 배경 아트가 어두워 고정 */
.surface-inverse {
  color-scheme: dark;
  --c-bg: #0e1323;
  --c-surface: #1b2236;
  --c-surface-2: #252d45;
  --c-border: #2c3650;
  --c-text: #f5f7fc;
  --c-text-muted: #c3cad9;
  --c-accent-text: #ff7a1a;
  --c-focus: #ff7a1a;
  --c-inverse-scrim: linear-gradient(
    90deg,
    rgba(11, 16, 32, 0.88) 0%,
    rgba(11, 16, 32, 0.55) 45%,
    rgba(11, 16, 32, 0) 75%
  );
}

/* 커뮤니티 — 분류 배지 색 6종 (다크: 밝은 글자 / 라이트: 진한 글자, 배경은 같은 색을 옅게 섞어 쓴다) */
:root,
:root[data-theme="dark"] {
  --c-tone-1: #8ea8ff;
  --c-tone-2: #b69cff;
  --c-tone-3: #4ed19a;
  --c-tone-4: #ffb65c;
  --c-tone-5: #ff8fb8;
  --c-tone-6: #5cd3e6;
  --c-cm-hero: linear-gradient(100deg, #0e1323 0%, #17204a 55%, #2a1a4a 100%);
  --c-cm-glow-a: #3b6bff;
  --c-cm-glow-b: #fe6000;
}
:root[data-theme="light"] {
  --c-tone-1: #2f55d4;
  --c-tone-2: #6d3fd8;
  --c-tone-3: #0f7a4c;
  --c-tone-4: #a35400;
  --c-tone-5: #b4235a;
  --c-tone-6: #0b7285;
}
/* hero 는 두 테마 모두 어두운 띠 */
.surface-inverse {
  --c-tone-1: #8ea8ff;
  --c-tone-2: #b69cff;
  --c-tone-3: #4ed19a;
  --c-tone-4: #ffb65c;
  --c-tone-5: #ff8fb8;
  --c-tone-6: #5cd3e6;
}