/*
 * UWD 공용 디자인 토큰 — 단일 원본(source of truth).
 * 세 제품(홈페이지 / Windows 앱 / Chrome 확장)이 각자의 저장소·빌드 구조에 이 파일을
 * 그대로 복사해서 쓴다(공용 npm 패키지로 억지로 묶지 않는다 — 지시서 PHASE 1 원칙).
 * 원본: ultimate-website-downloader/docs/design/uwd-design-tokens.css
 * 값을 바꿀 때는 그 원본 파일을 먼저 고치고, 세 제품에 각각 다시 복사한다.
 *
 * 값의 출처: UWD_Brand_Guidelines_v1.0.md(공식 브랜드킷) + 작업지시서 §4-2.
 * 참고 이미지의 색상(예: 별도 PNG 인포그래픽의 #04D965 등)은 이 값과 다르며 사용하지 않는다.
 */

:root {
  /* ── 브랜드 색상(원본값, 절대 임의 변경 금지) ── */
  --uwd-green: #00e56b;
  --uwd-glow-green: #35f3a2;
  --uwd-dark-charcoal: #2d2626;
  --uwd-neutral-gray: #6f6f6f;
  --uwd-light-gray: #efefef;
  --uwd-white: #ffffff;

  /* ── 의미 기반 별칭 ── */
  --uwd-bg-dark: #000000;
  --uwd-bg-light: var(--uwd-light-gray);
  --uwd-surface-dark: #362e2e;
  --uwd-surface-light: var(--uwd-white);
  --uwd-text-on-dark: var(--uwd-white);
  --uwd-text-on-dark-muted: #b9b3b3;
  --uwd-text-on-light: var(--uwd-dark-charcoal);
  --uwd-text-on-light-muted: #666666; /* neutral-gray는 밝은 배경에서 AA 미달, §HOLD 수정 BLOCKER D */
  --uwd-accent: var(--uwd-green);
  --uwd-accent-glow: var(--uwd-glow-green);

  --uwd-info-bg: var(--uwd-white);
  --uwd-info-text: var(--uwd-dark-charcoal);
  --uwd-info-muted: var(--uwd-neutral-gray);
  --uwd-info-border: #d9d9d9;

  --uwd-success: var(--uwd-green);
  --uwd-error: #ff5c5c;
  --uwd-error-on-light: #c62828;
  --uwd-warning: #ffb020;
  /* --uwd-green(#00e56b)은 흰/밝은 배경 위 텍스트로 쓰면 1.69:1로 WCAG AA(4.5:1)에 크게
     못 미친다 — 로고 자체 색상은 그대로 두고(임의 변경 금지), 정보성 페이지의 링크·강조
     텍스트에만 쓰는 어두운 변형을 별도로 둔다. 순백(5.83:1)뿐 아니라 목차의 실제 배경인
     --uwd-bg-light(#efefef, 5.07:1)에서도 여유 있게 AA를 넘도록 잡았다. */
  --uwd-green-on-light: #007537;

  /* ── 테마 스위칭 별칭 — 라이트/다크 토글이 실제로 값을 바꾸는 유일한 계층.
     기본(:root) = 라이트, [data-theme="dark"] = 다크. ── */
  --uwd-page-bg: var(--uwd-bg-light);
  --uwd-surface: var(--uwd-surface-light);
  --uwd-text: var(--uwd-text-on-light);
  --uwd-text-muted: var(--uwd-text-on-light-muted);
  --uwd-accent-text: var(--uwd-green-on-light);
  --uwd-error-text: var(--uwd-error-on-light);
  --uwd-border: var(--uwd-info-border);
  --uwd-hover-overlay: var(--uwd-bg-light);

  /* ── 타이포그래피 ── */
  --uwd-font-heading-en: "Montserrat", "Inter", sans-serif;
  --uwd-font-body-en: "Inter", sans-serif;
  --uwd-font-kr: "Pretendard", "SUIT", "Noto Sans KR", sans-serif;

  --uwd-fw-heading: 800;
  --uwd-fw-heading-alt: 700;
  --uwd-fw-body-regular: 400;
  --uwd-fw-body-medium: 500;

  /* ── 간격 체계(4/8/12/16/24/32/48 고정) ── */
  --uwd-space-4: 4px;
  --uwd-space-8: 8px;
  --uwd-space-12: 12px;
  --uwd-space-16: 16px;
  --uwd-space-24: 24px;
  --uwd-space-32: 32px;
  --uwd-space-48: 48px;

  /* ── 모서리 반경 ── */
  --uwd-radius-sm: 6px;
  --uwd-radius-md: 10px;
  --uwd-radius-lg: 16px;
  --uwd-radius-pill: 999px;

  /* ── 그림자 ── */
  --uwd-shadow-card-light: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --uwd-shadow-glow-green: 0 0 12px rgba(0, 229, 107, 0.35);
  --uwd-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* ── 포커스 ── */
  --uwd-focus-ring: 2px solid var(--uwd-glow-green);
  --uwd-focus-ring-offset: 2px;

  /* ── 트랜지션 ── */
  --uwd-transition-fast: 120ms ease;
  --uwd-transition-base: 200ms ease;
}

[data-theme="dark"] {
  --uwd-page-bg: var(--uwd-bg-dark);
  --uwd-surface: var(--uwd-surface-dark);
  --uwd-text: var(--uwd-text-on-dark);
  --uwd-text-muted: var(--uwd-text-on-dark-muted);
  --uwd-accent-text: var(--uwd-green);
  --uwd-error-text: var(--uwd-error);
  --uwd-border: rgba(255, 255, 255, 0.08);
  --uwd-hover-overlay: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --uwd-transition-fast: 0ms;
    --uwd-transition-base: 0ms;
  }
}