/* ============================================================
   tokens.css — 도륙(Dor6) 디자인 토큰
   엠블럼(검은 방패 + 실버 메탈릭) 기반: 다크 테마 + 실버/그레이 포인트
   ============================================================ */
:root {
  /* --- 배경 계층 (near-black → 표면) --- */
  --bg:            #0b0c0e;   /* 페이지 배경 (엠블럼 검정과 융화) */
  --surface:       #15171b;   /* 카드·헤더 표면 */
  --surface-2:     #1d2026;   /* 표면 위 강조 영역 */
  --surface-3:     #262a31;   /* 입력창·호버 */
  --border:        #2e333b;   /* 경계선 */

  /* --- 텍스트 --- */
  --text:          #e8eaed;   /* 기본 텍스트 */
  --text-muted:    #9aa2ab;   /* 보조 텍스트 */
  --text-dim:      #6b727c;   /* 흐린 텍스트 */

  /* --- 실버/메탈릭 포인트 --- */
  --silver:        #c7ccd1;
  --silver-bright: #e6e9ec;
  --silver-dim:    #8b929b;
  --metal-grad:    linear-gradient(135deg, #e6e9ec 0%, #a9b0b8 45%, #6f767e 100%);

  /* --- 상태 색 --- */
  --ok:            #3fb950;   /* 판수 달성 */
  --ok-bg:         rgba(63,185,80,.12);
  --warn:          #d29922;   /* 임박·주의 */
  --warn-bg:       rgba(210,153,34,.12);
  --danger:        #e5534b;   /* 미달 */
  --danger-bg:     rgba(229,83,75,.12);
  --info:          #58a6ff;   /* 정보·링크 */

  /* --- 결과 색 (승/무/패) --- */
  --win:           #3fb950;
  --draw:          #8b929b;
  --lose:          #e5534b;

  /* --- 테마별로 바뀌는 보조 색 (v2.20.0 밝은 모드 — 하드코딩 색 대신 사용) --- */
  --gold:          #ffd479;   /* 칭호·우승 강조 글자 */
  --info-soft:     #8fc3ff;   /* 옅은 파랑 글자 */
  --hot:           #ff9a5c;   /* 주황(연승·수정) 글자 */
  --mine-bg:       rgba(199,204,209,.07);   /* 내 팀·내 행 강조 배경 */
  --header-bg:     rgba(11,12,14,.85);      /* 고정 헤더·네비 반투명 배경 */
  --glow-1:        rgba(199,204,209,.06);   /* 배경 은은한 광택 */
  --glow-2:        rgba(88,166,255,.04);
  --nav-shadow:    rgba(199,204,209,.25);
  color-scheme: dark;

  /* --- 간격 스케일 --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* --- 타이포 --- */
  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px;

  /* --- 반경·그림자 --- */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow:    0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);

  /* --- 레이아웃 --- */
  --maxw: 960px;
  --header-h: 56px;
}

/* ============================================================
   ☀️ 밝은 모드 (v2.20.0) — <html data-theme="light">  (js/theme.js가 설정)
   같은 변수 이름을 덮어써서 모든 화면이 그대로 따라옴.
   --silver-bright 는 '강조 글자'로 쓰이므로 밝은 모드에선 진한 색.
   ============================================================ */
:root[data-theme="light"] {
  --bg:            #eef0f3;
  --surface:       #ffffff;
  --surface-2:     #f3f4f6;
  --surface-3:     #e6e8ec;
  --border:        #d6dae0;

  --text:          #1b1f24;
  --text-muted:    #545c66;
  --text-dim:      #7c848e;

  --silver:        #3b424b;
  --silver-bright: #14171b;
  --silver-dim:    #8b929b;
  --metal-grad:    linear-gradient(135deg, #5b636d 0%, #2c3239 55%, #0f1215 100%);

  --ok:            #1f883d;
  --ok-bg:         rgba(31,136,61,.10);
  --warn:          #9a6700;
  --warn-bg:       rgba(154,103,0,.10);
  --danger:        #cf222e;
  --danger-bg:     rgba(207,34,46,.08);
  --info:          #0969da;

  --win:           #1f883d;
  --draw:          #6e7781;
  --lose:          #cf222e;

  --gold:          #9a6a00;
  --info-soft:     #0969da;
  --hot:           #c2410c;
  --mine-bg:       rgba(9,105,218,.07);
  --header-bg:     rgba(255,255,255,.88);
  --glow-1:        rgba(9,105,218,.05);
  --glow-2:        rgba(154,106,0,.04);
  --nav-shadow:    rgba(20,23,27,.18);

  --shadow:    0 4px 16px rgba(20,23,27,.08);
  --shadow-lg: 0 8px 32px rgba(20,23,27,.14);
  color-scheme: light;
}