/* ==========================================================================
   game.dev-play.kr — 디자인 토큰 (Carbon Design System v11 · Gray 90 테마)
   ==========================================================================
   이 파일은 :root 커스텀 프로퍼티만 정의합니다 (리셋/레이아웃 CSS 아님).
   값의 출처와 검증 방법, 뮤트 블루 적용 원칙은 ../design.md 를 참고하세요.
   레퍼런스 소스: ../../ibm_design/design.md (Carbon 전반), ../../ibm_design/claude.md (규칙)

   하드코딩 금지 원칙: 페이지 CSS에서는 이 파일의 var(--cds-*) 토큰만 참조하고,
   직접 hex/px 값을 쓰지 마세요.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     0. 프로젝트 커스텀 뮤트 블루 램프
     (ibm_design/design.md 4-1절 "Blue 뮤트 처리" 참고)
     Interactive / Link / Border-interactive 등 Blue 계열 토큰이 이 램프를 참조합니다.
     ------------------------------------------------------------------------ */
  --muted-blue-10: #c3d1e7;
  --muted-blue-20: #afc1de;
  --muted-blue-30: #91a9d2;
  --muted-blue-40: #7090c5;
  --muted-blue-50: #4c74b6;
  --muted-blue-60: #3b5b90; /* Primary/Interactive 기본값(목표색) */
  --muted-blue-70: #293f63; /* Hover 상태 */
  --muted-blue-80: #1a2840; /* Active/Pressed 상태 */
  --muted-blue-90: #0c131e;
  --muted-blue-100: #06090e;

  /* ------------------------------------------------------------------------
     1. 배경 (Background)
     ------------------------------------------------------------------------ */
  --cds-background: #262626; /* gray90 */
  --cds-background-hover: rgba(141, 141, 141, 0.16); /* gray50 16% */
  --cds-background-active: rgba(141, 141, 141, 0.4); /* gray50 40% */
  --cds-background-selected: rgba(141, 141, 141, 0.24); /* gray50 24% */
  --cds-background-selected-hover: rgba(141, 141, 141, 0.32); /* gray50 32% */
  --cds-background-inverse: #f4f4f4; /* gray10 */
  --cds-background-inverse-hover: #e8e8e8; /* gray10Hover */
  /* 보너스: 브랜드 배경(Blue 계열) — 뮤트 적용 */
  --cds-background-brand: var(--muted-blue-60); /* 스톡 #0f62fe (blue60) */

  /* ------------------------------------------------------------------------
     2. 레이어 & 필드 (Layer & Field) — 표면 깊이 표현용
     ------------------------------------------------------------------------ */
  --cds-layer-01: #393939; /* gray80 */
  --cds-layer-02: #525252; /* gray70 */
  --cds-layer-03: #6f6f6f; /* gray60 */
  --cds-layer-hover-01: #474747; /* gray80Hover */
  --cds-layer-hover-02: #636363; /* gray70Hover */
  --cds-layer-hover-03: #5e5e5e; /* gray60Hover */
  --cds-layer-accent-01: #525252; /* gray70 */
  --cds-layer-accent-02: #6f6f6f; /* gray60 */
  --cds-layer-accent-03: #8d8d8d; /* gray50 */

  --cds-field-01: #393939; /* gray80 */
  --cds-field-02: #525252; /* gray70 */
  --cds-field-03: #6f6f6f; /* gray60 */
  --cds-field-hover-01: #474747; /* gray80Hover */
  --cds-field-hover-02: #636363; /* gray70Hover */

  /* ------------------------------------------------------------------------
     3. 보더 (Border)
     ------------------------------------------------------------------------ */
  --cds-border-subtle-00: #525252; /* gray70 */
  --cds-border-subtle-01: #6f6f6f; /* gray60 */
  --cds-border-subtle-02: #8d8d8d; /* gray50 */
  --cds-border-subtle-03: #8d8d8d; /* gray50 (다크 테마에서는 02와 동일) */
  --cds-border-strong-01: #8d8d8d; /* gray50 */
  --cds-border-strong-02: #a8a8a8; /* gray40 */
  --cds-border-strong-03: #c6c6c6; /* gray30 */
  --cds-border-inverse: #f4f4f4; /* gray10 */
  --cds-border-disabled: rgba(141, 141, 141, 0.5); /* gray50 50% */
  /* Blue 적용: 인터랙티브 요소(포커스 가능한 입력 필드 등)의 보더 */
  --cds-border-interactive: var(--muted-blue-50); /* 스톡 #4589ff (blue50) */

  /* ------------------------------------------------------------------------
     4. 텍스트 (Text)
     ------------------------------------------------------------------------ */
  --cds-text-primary: #f4f4f4; /* gray10 */
  --cds-text-secondary: #c6c6c6; /* gray30 */
  --cds-text-placeholder: rgba(244, 244, 244, 0.4); /* gray10 40% */
  --cds-text-helper: #c6c6c6; /* gray30 */
  --cds-text-on-color: #ffffff; /* white — 컬러 배경(버튼 등) 위 텍스트 */
  --cds-text-on-color-disabled: rgba(255, 255, 255, 0.25);
  --cds-text-disabled: rgba(244, 244, 244, 0.25); /* gray10 25% */
  --cds-text-inverse: #161616; /* gray100 — 라이트 표면 위 텍스트 */
  --cds-text-error: #ffb3b8; /* red30, 상태색 — 스톡 유지 */

  /* ------------------------------------------------------------------------
     5. 아이콘 (Icon)
     ------------------------------------------------------------------------ */
  --cds-icon-primary: #f4f4f4; /* gray10 */
  --cds-icon-secondary: #c6c6c6; /* gray30 */
  --cds-icon-on-color: #ffffff; /* white */
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
  --cds-icon-inverse: #161616; /* gray100 */
  /* 주의: icon-interactive는 스톡부터 Blue가 아니라 white입니다 (다크 배경 대비 최대화 목적) */
  --cds-icon-interactive: #ffffff;

  /* ------------------------------------------------------------------------
     6. 링크 (Link) — Blue 계열, 뮤트 적용
     ------------------------------------------------------------------------ */
  --cds-link-primary: var(--muted-blue-40); /* 스톡 #78a9ff (blue40) */
  --cds-link-primary-hover: var(--muted-blue-30); /* 스톡 #a6c8ff (blue30) */
  --cds-link-secondary: var(--muted-blue-30); /* 스톡 #a6c8ff (blue30) */
  --cds-link-inverse: var(--muted-blue-60); /* 스톡 #0f62fe (blue60), 라이트 표면 위 사용 */
  --cds-link-inverse-hover: var(--muted-blue-70); /* 스톡 #0043ce (blue70) */
  --cds-link-visited: #be95ff; /* purple40 — Blue 계열 아님, 스톡 유지 */
  --cds-link-inverse-visited: #8a3ffc; /* purple60, 스톡 유지 */

  /* ------------------------------------------------------------------------
     7. 지원 상태색 (Support) — Red/Green/Yellow/Info, 스톡 유지
     ------------------------------------------------------------------------ */
  --cds-support-error: #ff8389; /* red40 */
  --cds-support-success: #42be65; /* green40 */
  --cds-support-warning: #f1c21b; /* yellow30 */
  --cds-support-info: #4589ff; /* blue50 — 상태색으로 분류, 스톡 유지 (design.md 2.2절 참고) */
  --cds-support-error-inverse: #da1e28; /* red60 */
  --cds-support-success-inverse: #24a148; /* green50 */
  --cds-support-warning-inverse: #f1c21b; /* yellow30 */
  --cds-support-info-inverse: #0043ce; /* blue70 */

  /* ------------------------------------------------------------------------
     8. 인터랙티브 / 포커스 / 오버레이
     ------------------------------------------------------------------------ */
  --cds-interactive: var(--muted-blue-50); /* 스톡 #4589ff (blue50) */
  --cds-highlight: var(--muted-blue-80); /* 스톡 #002d9c (blue80), AI 하이라이트 등 */
  /* focus는 스톡(white) 유지 권장 — design.md 2.2/2.3절의 접근성 검증 결과 참고 */
  --cds-focus: #ffffff;
  --cds-focus-inset: #161616; /* gray100 */
  --cds-focus-inverse: var(--muted-blue-60); /* 라이트 표면 위에 놓인 포커스 링 */
  /* 컬러 포인트가 필요한 특수 케이스 전용 — layer-01 이상 표면에서는 사용 지양 (대비 부족, design.md 2.3절) */
  --cds-focus-accent: var(--muted-blue-50);
  --cds-overlay: rgba(0, 0, 0, 0.6); /* 모달/오버레이 배경 */
  --cds-shadow: rgba(0, 0, 0, 0.8);

  /* 보너스: 버튼류 (요청 목록 외 추가 제공, 뮤트 램프의 기본/hover/active 단계를 그대로 매핑) */
  --cds-button-primary: var(--muted-blue-60); /* 스톡 #0f62fe */
  --cds-button-primary-hover: var(--muted-blue-70); /* 스톡 #0050e6 */
  --cds-button-primary-active: var(--muted-blue-80); /* 스톡 #002d9c */
  --cds-button-secondary: #6f6f6f; /* gray60, 스톡 유지 */
  --cds-button-danger-primary: #da1e28; /* red60, 스톡 유지 */

  /* ==========================================================================
     타이포그래피 (Typography)
     서체: IBM Plex Sans / IBM Plex Mono (Google Fonts CDN — index.php 등에서 별도 <link> 필요)
     ========================================================================== */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont,
    '.SFNSText-Regular', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
    'Bitstream Vera Sans Mono', Courier, monospace;

  /* ---- 타입 스케일: heading ---- */
  --cds-heading-01-font-size: 0.875rem; /* 14px */
  --cds-heading-01-font-weight: 600;
  --cds-heading-01-line-height: 1.42857;
  --cds-heading-01-letter-spacing: 0.16px;

  --cds-heading-compact-01-font-size: 0.875rem; /* 14px */
  --cds-heading-compact-01-font-weight: 600;
  --cds-heading-compact-01-line-height: 1.28572;
  --cds-heading-compact-01-letter-spacing: 0.16px;

  --cds-heading-02-font-size: 1rem; /* 16px */
  --cds-heading-02-font-weight: 600;
  --cds-heading-02-line-height: 1.5;
  --cds-heading-02-letter-spacing: 0;

  --cds-heading-03-font-size: 1.25rem; /* 20px */
  --cds-heading-03-font-weight: 400;
  --cds-heading-03-line-height: 1.4;
  --cds-heading-03-letter-spacing: 0;

  --cds-heading-04-font-size: 1.75rem; /* 28px */
  --cds-heading-04-font-weight: 400;
  --cds-heading-04-line-height: 1.28572;
  --cds-heading-04-letter-spacing: 0;

  --cds-heading-05-font-size: 2rem; /* 32px */
  --cds-heading-05-font-weight: 400;
  --cds-heading-05-line-height: 1.25;
  --cds-heading-05-letter-spacing: 0;

  --cds-heading-06-font-size: 2.625rem; /* 42px */
  --cds-heading-06-font-weight: 300;
  --cds-heading-06-line-height: 1.199;
  --cds-heading-06-letter-spacing: 0;

  /* heading-07: 컴파일된 CSS 번들에 없어 @carbon/type 소스 스케일 배열로 계산한 값 (design.md 4.2절 참고) */
  --cds-heading-07-font-size: 3.375rem; /* 54px */
  --cds-heading-07-font-weight: 300;
  --cds-heading-07-line-height: 1.199;
  --cds-heading-07-letter-spacing: 0;

  /* ---- 타입 스케일: body ---- */
  --cds-body-01-font-size: 0.875rem; /* 14px */
  --cds-body-01-font-weight: 400;
  --cds-body-01-line-height: 1.42857;
  --cds-body-01-letter-spacing: 0.16px;

  --cds-body-02-font-size: 1rem; /* 16px */
  --cds-body-02-font-weight: 400;
  --cds-body-02-line-height: 1.5;
  --cds-body-02-letter-spacing: 0;

  --cds-body-compact-01-font-size: 0.875rem; /* 14px */
  --cds-body-compact-01-font-weight: 400;
  --cds-body-compact-01-line-height: 1.28572;
  --cds-body-compact-01-letter-spacing: 0.16px;

  --cds-body-compact-02-font-size: 1rem; /* 16px */
  --cds-body-compact-02-font-weight: 400;
  --cds-body-compact-02-line-height: 1.375;
  --cds-body-compact-02-letter-spacing: 0;

  /* ---- 타입 스케일: label / helper-text / caption ---- */
  --cds-label-01-font-size: 0.75rem; /* 12px */
  --cds-label-01-font-weight: 400;
  --cds-label-01-line-height: 1.33333;
  --cds-label-01-letter-spacing: 0.32px;

  --cds-label-02-font-size: 0.875rem; /* 14px */
  --cds-label-02-font-weight: 400;
  --cds-label-02-line-height: 1.28572;
  --cds-label-02-letter-spacing: 0.16px;

  --cds-helper-text-01-font-size: 0.75rem; /* 12px */
  --cds-helper-text-01-line-height: 1.33333;
  --cds-helper-text-01-letter-spacing: 0.32px;

  /* helper-text-02: 컴파일된 CSS 번들에 없어 소스 스케일 배열로 계산한 값 */
  --cds-helper-text-02-font-size: 0.875rem; /* 14px */
  --cds-helper-text-02-line-height: 1.28572;
  --cds-helper-text-02-letter-spacing: 0.16px;

  --cds-caption-01-font-size: 0.75rem; /* 12px */
  --cds-caption-01-font-weight: 400;
  --cds-caption-01-line-height: 1.33333;
  --cds-caption-01-letter-spacing: 0.32px;

  /* caption-02: 컴파일된 CSS 번들에 없어 소스 스케일 배열로 계산한 값 */
  --cds-caption-02-font-size: 0.875rem; /* 14px */
  --cds-caption-02-font-weight: 400;
  --cds-caption-02-line-height: 1.28572;
  --cds-caption-02-letter-spacing: 0.32px;

  /* ---- 타입 스케일: code (IBM Plex Mono) ---- */
  --cds-code-01-font-size: 0.75rem; /* 12px */
  --cds-code-01-font-weight: 400;
  --cds-code-01-line-height: 1.33333;
  --cds-code-01-letter-spacing: 0.32px;

  --cds-code-02-font-size: 0.875rem; /* 14px */
  --cds-code-02-font-weight: 400;
  --cds-code-02-line-height: 1.42857;
  --cds-code-02-letter-spacing: 0.32px;

  /* ==========================================================================
     스페이싱 (Spacing) — 8px 미니 유닛 기반 2x Grid
     공식 계산식: miniUnits(n) = rem(8 * n) (@carbon/layout 확인)
     ========================================================================== */
  --cds-spacing-01: 0.125rem; /* 2px */
  --cds-spacing-02: 0.25rem; /* 4px */
  --cds-spacing-03: 0.5rem; /* 8px */
  --cds-spacing-04: 0.75rem; /* 12px */
  --cds-spacing-05: 1rem; /* 16px */
  --cds-spacing-06: 1.5rem; /* 24px */
  --cds-spacing-07: 2rem; /* 32px */
  --cds-spacing-08: 2.5rem; /* 40px */
  --cds-spacing-09: 3rem; /* 48px */
  --cds-spacing-10: 4rem; /* 64px */
  --cds-spacing-11: 5rem; /* 80px */
  --cds-spacing-12: 6rem; /* 96px */
  --cds-spacing-13: 10rem; /* 160px */

  /* 플루이드 스페이싱 (뷰포트 비례) */
  --cds-fluid-spacing-01: 0;
  --cds-fluid-spacing-02: 2vw;
  --cds-fluid-spacing-03: 5vw;
  --cds-fluid-spacing-04: 10vw;

  /* 레이아웃 전용(넓은 간격, Carbon 소스상 Deprecated 표시 있으나 참고용으로 포함) */
  --cds-layout-01: 1rem; /* 16px */
  --cds-layout-02: 1.5rem; /* 24px */
  --cds-layout-03: 2rem; /* 32px */
  --cds-layout-04: 3rem; /* 48px */
  --cds-layout-05: 4rem; /* 64px */
  --cds-layout-06: 6rem; /* 96px */
  --cds-layout-07: 10rem; /* 160px */

  /* ==========================================================================
     2x Grid 브레이크포인트 (참고용 — CSS 커스텀 프로퍼티는 @media 조건에 직접 못 씀)
     실제 미디어쿼리에는 아래 px 값을 그대로 사용하세요.
     sm: 320px (4열) / md: 672px (8열) / lg: 1056px (16열)
     xlg: 1312px (16열) / max: 1584px (16열)
     ========================================================================== */
  --breakpoint-sm: 20rem; /* 320px */
  --breakpoint-md: 42rem; /* 672px */
  --breakpoint-lg: 66rem; /* 1056px */
  --breakpoint-xlg: 82rem; /* 1312px */
  --breakpoint-max: 99rem; /* 1584px */
  --layout-max-width: 60rem; /* 960px — 전체 페이지 가로폭 상한 (오너 확정, 2026-07-02) */
  --hero-banner-bg: #1d1e24; /* 홈 키 비주얼(spkey.jpg) 배경과 동일한 색 — 이미지에서 도출된 값 (오너 지정) */
  --hero-banner-max-width: 1595px; /* 키 비주얼 원본 폭 (오너 지정) */

  /* ==========================================================================
     아바타 컴포넌트 (Phase 3 — R3.4/R3.5/S8 프로필 사진 사이즈)
     PPT(홍차넷) 관례를 그대로 복제한 고정 픽셀 값 — 일반 55px / 밀집 45px /
     클릭 확대 160px, 확대 전환 0.1s. Carbon 8px 스페이싱 스케일(spacing-08=40px,
     spacing-09=48px)과 정확히 일치하지 않아 이 컴포넌트 전용 토큰으로 별도 정의한다.
     ========================================================================== */
  --avatar-size-normal: 3.4375rem; /* 55px */
  --avatar-size-dense: 2.8125rem; /* 45px */
  --avatar-size-mini: 1.625rem; /* 26px — 랭킹 행 등 텍스트 높이 컨텍스트 */
  --avatar-size-zoom: var(--cds-spacing-13); /* 160px — 기존 스페이싱 스케일과 정확히 일치해 재사용 */
  --avatar-zoom-transition: 0.1s;

  /* ==========================================================================
     비주얼 폴리시 패스 (2026-07-02, 오너 피드백 — "css 디자인 스타일이 보기에
     좋게 느껴지지는 않아") — 카드/버튼의 라운딩·표면감(elevation)·전환 속도,
     그리고 홈 히어로 키비주얼(spkey.jpg, 따뜻한 톤의 픽셀 고양이 일러스트)과
     어울리는 보조 강조색을 추가한다. design.md에 정의되지 않은 순수 장식
     토큰이며, 기존 --cds-* Carbon 토큰 체계를 대체하지 않는다.
     ========================================================================== */
  --radius-sm: 0.25rem; /* 4px — 입력 필드, 소형 뱃지/버튼 */
  --radius-md: 0.5rem; /* 8px — 카드, 패널, 기본 버튼 */
  --radius-lg: 0.75rem; /* 12px — 큰 강조 패널 */
  --radius-pill: 999px; /* 세그먼트 탭, 칩 (기존 .pill 관례와 통일) */

  --shadow-resting: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-lifted: 0 12px 24px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-panel: -8px 0 24px rgba(0, 0, 0, 0.4); /* 드로어 등 오버레이 패널용 */

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;

  /* 보조 강조색(warm accent) — 뮤트 블루만으로는 "오락실"다운 생동감이
     부족하다는 피드백에 대응해 도입한 호박색 램프. 히어로 일러스트 속
     캐릭터 아이템의 따뜻한 톤에서 착안했다. 좋아요/랭킹 메달처럼 좁고
     의미가 분명한 범위에서만 포인트로 사용하고, Interactive/Link 체계를
     대체하지 않는다(design.md 2.2절의 뮤트 블루 원칙은 그대로 유지).
     대비 확인: #eab54f(warm-40) vs $background(#262626) 대비비 약 8.9:1,
     vs $layer-01(#393939) 대비비 약 6.7:1 — 텍스트/아이콘 용도로 AA 여유 통과. */
  --accent-warm-30: #f4c877;
  --accent-warm-40: #eab54f; /* 기본값 — 좋아요 하트, 강조 아이콘 */
  --accent-warm-50: #d99a2b; /* hover */
  --accent-warm-60: #b87d1c; /* active */
  --accent-warm-on: #2b1a06; /* warm 배경(밝은 톤) 위에 올리는 텍스트 전용 */

  /* 스코어보드/업적 순위 메달 색 — 순위 1~3위 강조용 (게임 아케이드다운 연출) */
  --medal-gold: #eab54f;
  --medal-silver: #c7ccd1;
  --medal-bronze: #c98452;
}