/*
 * tokens-pokevault.css — PokeVault 다크 테마 공용 디자인 토큰
 *
 * 정본: docs/design/DESIGN-SYSTEM-pokevault.md (TICKET-588)
 * 이 파일은 그 문서의 --pv-* 값을 CSS 커스텀 프로퍼티로 그대로 옮긴 것이다.
 * 순수 토큰 정의만 담는다 — 컴포넌트 클래스·레이아웃 규칙은 넣지 않는다
 * (컴포넌트는 각 화면이 자기 CSS에 둔다).
 *
 * 다크 전용이다 — DESIGN-SYSTEM-pokevault.md 원본이 라이트 모드를 정의하지
 * 않는다(시안 자체가 다크 테마로 고정, TICKET-588). prefers-color-scheme
 * 분기 없음.
 *
 * TICKET-619: SCREEN-001이 요구하지만 PokeVault 원본에 대응 값이 없던
 * 토큰 10여 개를 §6에 --pv- 접두사로 새로 정의했다. 각 정의 옆에 어떤
 * 기존 값을 근거로 골랐는지 주석으로 남긴다(대조표 별도 작성 안 함).
 */

:root {
  /* ── 1. 색상 — DESIGN-SYSTEM-pokevault.md §1 ─────────────────────── */

  /* 1-1. 배경 계층 */
  --pv-bg-base:      #080b14;  /* 페이지 최상위 배경 */
  --pv-bg-surface:   #0f1629;  /* 카드·패널 배경 */
  --pv-bg-elevated:  #131c30;  /* 입력창·스탯 박스 등 올라온 요소 */
  --pv-bg-overlay:   #060a11;  /* 카드 아트 영역·네비 배경·다크 섹션·푸터 */
  --pv-bg-secondary: #1a2340;  /* 호버 상태·세컨더리 버튼 배경 */

  /* 1-2. 경계선 */
  --pv-border-default: #1e2d4a;  /* 모든 카드·패널 기본 보더 */
  --pv-border-subtle:  #2d3748;  /* 구분선 */

  /* 1-3. 텍스트 */
  --pv-text-primary:   #e8eaf0;  /* 제목·주요 텍스트 */
  --pv-text-secondary: #a0aec0;  /* 보조 텍스트·라벨 */
  --pv-text-muted:     #6b7a99;  /* 캡션·서브라벨 */
  --pv-text-disabled:  #4a5568;  /* 비활성 텍스트·비활성 버튼 라벨 */

  /* 1-4. 브랜드 · 액센트 */
  --pv-color-gold:     #f4c430;  /* 1차 브랜드색 — 주 CTA·활성 탭·강조 숫자 */
  --pv-color-red:      #e53e3e;  /* 로고 그라디언트 보조색 */
  --pv-color-green:    #68d391;  /* 상승·긍정 지표 (2단계) */
  --pv-color-blue:     #63b3ed;  /* 링크·정보 강조 (2단계) */
  --pv-color-purple:   #c680e3;
  --pv-color-indigo:   #6366f1;
  --pv-color-red-soft: #fc8181;  /* 에러 */

  /* 1-5. 포커스 · 상태 */
  --pv-focus-ring: #f4c430;   /* :focus-visible 아웃라인 */
  --pv-error-text: #fc8181;

  /* ── 2. 타이포그래피 — DESIGN-SYSTEM-pokevault.md §2 ────────────── */

  /* 2-1. 폰트 패밀리 (웹폰트 도입 여부는 미확정 — §0 참조, 로드 실패 시 폴백 사용) */
  /* @font-face 정의는 이 파일이 아니라 base.html 인라인 <style>이다 (ADR-0038 D-6) —
     여기 CSS 는 static 파일이라 static_url() 의 내용 해시를 담을 수 없다. */
  --pv-font-display: "Orbitron", var(--pv-font-fallback-display);
  --pv-font-body:     "Outfit", var(--pv-font-fallback-body);
  --pv-font-mono:     "JetBrains Mono", var(--pv-font-fallback-mono);

  --pv-font-fallback-display: -apple-system, "Apple SD Gothic Neo", sans-serif;
  --pv-font-fallback-body:    -apple-system, "Apple SD Gothic Neo", "Segoe UI",
                               Roboto, "Noto Sans KR", sans-serif;
  --pv-font-fallback-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* 2-2. 스케일 */
  --pv-text-hero-size:     clamp(1.9rem, 5vw, 3.4rem);  /* 히어로 h1 */
  --pv-text-hero-weight:   900;
  --pv-text-hero-tracking: .1em;

  --pv-text-title-size:   1.3rem;   /* 섹션 제목 */
  --pv-text-title-weight: 700;

  --pv-text-body-size:   1rem;      /* 히어로 설명문 */
  --pv-text-body-weight: 400;
  --pv-text-body-line:   1.7;

  --pv-text-label-size:     .68rem; /* 통계 배지 라벨·시리즈 카드 연도 */
  --pv-text-label-weight:   700;
  --pv-text-label-tracking: .1em;

  --pv-text-micro-size: .62rem;     /* 배지 칩 */

  /* ── 3. 스페이싱 · 라운드 · 그림자 — §3 ───────────────────────────── */

  /* 3-1. 스페이싱 */
  --pv-space-1: .25rem;   /* 4px  — 배지·도트 내부 간격 */
  --pv-space-2: .5rem;    /* 8px  — 통계 그리드 gap */
  --pv-space-3: .75rem;   /* 12px — 기본 컴포넌트 gap */
  --pv-space-4: 1rem;     /* 16px — 시리즈 카드 그리드 gap */
  --pv-space-5: 1.25rem;  /* 20px */
  --pv-space-6: 1.5rem;   /* 24px — 컨테이너 좌우 기준 padding(전역) */
  --pv-space-8: 2rem;     /* 32px */
  --pv-space-10: 2.5rem;  /* 40px — 히어로 그리드 gap(2컬럼일 때) */
  --pv-space-14: 3.5rem;  /* 56px — 히어로 상하 padding */

  /* 3-2. 라운드 */
  --pv-radius-sm: 8px;     /* 스탯 박스 */
  --pv-radius-md: 10px;    /* 입력창·칩 */
  --pv-radius-lg: 14px;    /* 시리즈 카드 */
  --pv-radius-xl: 16px;    /* 강조 카드 */
  --pv-radius-pill: 999px; /* 배지 알약형 */

  /* 3-3. 그림자 · 글로우 */
  --pv-shadow-glow-gold:  0 0 24px rgba(244,196,48,.28), 0 0 64px rgba(244,196,48,.08);
  --pv-shadow-card-hover: 0 16px 48px rgba(0,0,0,.5);

  /* ── 4. 브레이크포인트 — §4 (SCREEN-001 §1-5·§2-3 과 동일 값, 새로 정의하지 않음) */
  --pv-bp-md: 600px;  /* = SCREEN-001 --bp-md */
  --pv-bp-lg: 900px;  /* = SCREEN-001 --bp-lg, 컨테이너 최대 폭 */

  /* ── 6. TICKET-619 신규 — PokeVault 원본에 대응 없는 토큰 ───────────
   * SCREEN-001이 요구하지만 DESIGN-SYSTEM-pokevault.md엔 없던 것들.
   * 기존 --pv-color, --pv-text 계열 팔레트에서 가장 가까운 값을 골라
   * --pv- 접두사로 새로 정의한다. 근거는 각 줄 주석 참조.
   */

  /* 배지 6종 — SCREEN-001 dark 모드값(§1, 라이트/다크 병행 토큰) 기준 색상군만 계승 */
  --pv-badge-current-bg:   var(--pv-color-blue);   /* 근거: --color-badge-current-bg dark(#3D63D9)와 같은 blue 계열 → pv-color-blue */
  --pv-badge-current-text: var(--pv-bg-base);      /* pv-color-blue가 원본보다 밝아 흰 글자 대신 어두운 텍스트로 대비 확보 */
  --pv-badge-legacy-bg:    var(--pv-color-purple); /* 근거: --color-badge-legacy-bg dark(#8768C4)와 같은 purple 계열 → pv-color-purple */
  --pv-badge-legacy-text:  var(--pv-bg-base);       /* 근거: --color-badge-legacy-text dark(#17121F)도 어두운 텍스트 — 밝은 배경엔 어두운 글자 유지 */
  --pv-badge-none-border:  var(--pv-border-subtle); /* 근거: --color-badge-none-border dark(#45484F)와 같은 중간톤 회색 보더 */
  --pv-badge-none-text:    var(--pv-text-secondary);/* 근거: --color-badge-none-text dark(#A8ABB3)와 pv-text-secondary(#a0aec0)가 사실상 동일 */

  /* 액센트 · 에러 */
  --pv-accent:    var(--pv-color-blue);   /* 근거: --color-accent dark(#7DA1FF)와 같은 blue 계열 */
  --pv-error-bg:  color-mix(in srgb, var(--pv-color-red) 15%, var(--pv-bg-base)); /* 근거: --color-error-bg dark(#3A2323, 어두운 배경 위 저채도 빨강 틴트)를 pv-color-red 기준으로 합성 */

  /* 카드 그림자 — SCREEN-001 dark 모드는 그림자 대신 보더로 경계를 표시(--shadow-card: none).
     PokeVault도 평상시엔 보더(--pv-border-default)만 쓰고 그림자는 hover 전용
     (--pv-shadow-card-hover)이라 같은 전략 — 새 값을 만들지 않고 none 을 계승한다. */
  --pv-shadow-card: none;

  /* 타이포 — pv 스케일에 정확히 대응하는 항목이 없어 SCREEN-001 원본값을
     그대로 이식하고, weight만 가장 가까운 pv 스케일에 맞춘다. */
  --pv-text-display-size:   1.5rem; /* 24px, 근거: --text-display-size 원본값 그대로(pv엔 24px 스케일 없음) */
  --pv-text-display-weight: 700;    /* 근거: pv-text-title-weight(700)과 동일 */
  --pv-text-display-line:   1.3;    /* 근거: --text-display-line 원본값 그대로 */

  --pv-text-caption-size:   .8125rem; /* 13px, 근거: --text-caption-size 원본값 그대로(pv-text-label .68rem 보다 큼) */
  --pv-text-caption-weight: 400;      /* 근거: pv-text-body-weight(400)과 동일 */
  --pv-text-caption-line:   1.4;      /* 근거: --text-caption-line 원본값 그대로 */

  --pv-text-badge-size:   .75rem; /* 12px, 근거: pv-text-label-size(.68rem)에 가장 가까운 배지용 크기 */
  --pv-text-badge-weight: 700;    /* 근거: pv-text-label-weight(700)과 동일 */
  --pv-text-badge-line:   1.2;    /* 근거: --text-badge-line 원본값 그대로 */

  --pv-text-body-strong-weight: 600; /* 근거: --text-body-strong-weight 원본값 그대로(pv-text-body-weight 400과 pv-text-title-weight 700 사이) */
}