/* ============================================================================
   ARAM Mayhem · 공통 디자인 토큰 (단일 소스)   v=20260702-fable1
   ----------------------------------------------------------------------------
   ▸ 정본(source of truth). 사이트는 이 파일을 link 해서 직접 소비하고,
     컴패니언(Electron, 오프라인)은 이 값을 자신의 :root 에 "미러"한다.
   ▸ 2026-07-02 Fable 리스킨("Frost Observatory"): 6/28 절제·정밀 기조 유지 위에
     ①가독성·이독성 상향(본문 대비·소형 텍스트 대비 강화, 숫자 tabular)
     ②모드 정체성 심화(증=자수정 오로라 / 일=빙하 시안 — 값만, 구조 불변)
     ③티어 사다리 톤 정돈(금/초록/청/회/코랄 유지, 명도 소폭 상향)
     변수명/구조 100% 동일 → 마크업/JS/클래스/ID/data-* 일절 불변.
   ▸ 로드 순서: style_v2.css → style_v2.theme.css → design-tokens.css
       → style_v2.reskin.css(컴포넌트 리스킨 레이어, 맨 뒤).

   ── 컴패니언 미러 매핑(컴패니언은 토큰 이름이 다름 → 값만 맞춘다) ──
     site --bg → companion --bg · site --surface → companion --card · site --bg-deep → companion --surface
     site --line → companion --line · site --text → companion --tx · site --muted → companion --mut
     site --good → companion --good/--win · site --bad → companion --bad/--loss
     site --tier-1..5 → companion --t1..t5
     site --accent(증강 자수정 / 표준 시안) → companion --accent(data-mode)
     (2026-07-02: 컴패니언 fable 오버레이 <style id="fable-reskin">로 미러 반영)
   ============================================================================ */

:root {
  /* 표면(얼음 아래 깊은 물) — 2026-07-02 목업 정본값으로 정합(fable.css bg0/bg1/panel/panel-2) */
  --bg:          #0b101a;
  --bg-deep:     #04060b;
  --surface:     #0d131e;
  --surface-2:   #131a27;
  --soft:        #131a27;
  --line:        rgba(148,163,184,.10);   /* 헤어라인 — 목업 반투명 정본 */
  --line-strong: rgba(148,163,184,.17);

  /* 글자 — 가독성 상향(본문/보조/희미 3단 모두 대비 강화) */
  --text:   #eef3fa;
  --muted:  #8d99ad;
  --faint:  #76829b;

  /* 액센트 = 모드색. 기본=증바람(자수정 오로라). standard-aram-mode 에서 빙하 시안. */
  --accent:        #a78bfa;
  --accent-strong: #8b5cf6;
  --accent-ink:    #140b2d;
  --accent-soft:   rgba(167,139,250,.12);
  --accent-line:   rgba(167,139,250,.32);
  --accent-2:      #d879f2;

  /* 의미색 — 소형 숫자에서도 또렷하게(명도 상향) */
  --gold:      #f2c14e;
  --good:      #3ddc97;
  --good-soft: rgba(61,220,151,.13);
  --warn:      #e7ad48;
  --warn-soft: rgba(231,173,72,.13);
  --bad:       #ff7b8c;
  --bad-soft:  rgba(255,123,140,.13);

  /* 티어 사다리(색+위치 이중신호) — 위계 유지, 명도 소폭 상향 */
  --tier-1: #f5ca5f;
  --tier-2: #4ade9a;
  --tier-3: #58aaea;
  --tier-4: #8b95a7;
  --tier-5: #ee7286;
  --tier-sample: #8b95a7;

  /* 엘리베이션 — 다크는 그림자보다 면 대비. 상단 하이라이트 1px + 은은한 깊이. */
  --shadow:      0 14px 34px -18px rgba(0,0,0,.65);
  --shadow-soft: 0 1px 0 rgba(255,255,255,.045) inset, 0 14px 34px -18px rgba(0,0,0,.65);

  /* 타입 스케일(13.5px 베이스 — 이독성 반 단 상향) */
  --fs-eyebrow: 11px;
  --fs-cap:     12px;
  --fs-body:    13.5px;
  --fs-md:      14px;
  --fs-lg:      17px;
  --fs-xl:      22px;
  --fs-num:     21px;

  /* 간격(4px 그리드) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 22px;  --sp-6: 30px;

  /* 라운드 — 목업 정본 스케일(fable.css 7/10/14/18) */
  --r-sm: 7px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 18px;  --r-pill: 999px;

  /* 폰트 — Pretendard 셀프호스팅(@font-face는 reskin 레이어), 숫자는 tabular */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Roboto, sans-serif;
  --font-num:  "Pretendard Variable", "SF Mono", "Cascadia Mono", "Segoe UI Mono", ui-monospace, monospace;

  /* 승률 막대(발산형: 50% 기준선 + 50%↔실제승률 채움) */
  --wr-track: rgba(255,255,255,.06);
  --wr-tick:  rgba(255,255,255,.35);

  /* ── fx (fable 리스킨 레이어 전용 장식 토큰 — 기존 코드는 미참조) ── */
  --fx-aurora-a: rgba(124,58,237,.20);
  --fx-aurora-b: rgba(216,121,242,.09);
  --fx-aurora-c: rgba(56,110,240,.09);
  --fx-glow:     rgba(139,92,246,.20);
}

/* 모드 색분리: 일반칼바람(빙하 시안). 증바람은 위 :root 기본(자수정) */
body.standard-aram-mode {
  --accent:        #3cc3f5;
  --accent-strong: #1f9fe0;
  --accent-ink:    #04202c;
  --accent-soft:   rgba(60,195,245,.12);
  --accent-line:   rgba(60,195,245,.32);
  --accent-2:      #2dd4bf;
  --tier-2: #4ade9a;
  --fx-aurora-a: rgba(14,116,204,.18);
  --fx-aurora-b: rgba(45,212,191,.09);
  --fx-aurora-c: rgba(99,102,241,.08);
  --fx-glow:     rgba(31,159,224,.20);
}