/* ================================================================
   Design Tokens — 전역 CSS 변수 (단일 기준)
   색상·라운드·간격·그림자·폰트는 여기서만 정의하고, 각 CSS는 var()로 참조.
   토큰 정의: .claude/DESIGN.md · 스타일가이드: /styleguide.html
   ※ 이 파일은 다른 CSS보다 먼저 로드 (reset/pc/mobile 이전)
   ================================================================ */
:root {
  /* ── 색상: 브랜드 블루 ── */
  --color-primary: #1b6dda;
  --color-primary-hover: #1860c2;
  --color-primary-pressed: #1554ad;

  /* ── 색상: 뉴트럴 ── */
  --color-canvas: #ffffff;
  --color-ink: #242424;
  --color-gray-800: #333333;
  --color-gray-700: #555555;
  --color-gray-600: #6f6f6f;
  --color-gray-500: #8b8b8b;
  --color-gray-400: #c1c1c1;
  --color-border-strong: #d9d9d9;
  --color-border: #ececec;
  --color-surface: #f2f2f2;
  --color-surface-light: #f7f7f7;
  --color-surface-cool: #f7f9fc;
  --color-black: #000000;

  /* ── 색상: 블루 틴트 ── */
  --color-tint-50: #f2f6fd;
  --color-tint-100: #eaf1fd;
  --color-line: #d9e4f5;

  /* ── 색상: 다크 서피스 (다크 섹션 전용 — 무료인강 히어로·단어 마법사 배너 등) ── */
  --color-dark-bg: #0e1424;
  --color-dark-surface: #1a2338;
  --color-dark-line: rgba(255,255,255,0.1);
  --color-dark-text: rgba(255,255,255,0.92);
  --color-dark-text-sub: rgba(255,255,255,0.55);
  --color-amber-dark-bg: rgba(240,140,0,0.16); /* 다크 서피스 위 앰버 강조 배경 (라이트용 --color-amber-bg의 다크 대응) */

  /* ── 색상: 시맨틱 배지 ── */
  --color-coral: #ff5b4f;
  --color-coral-bg: #ffeae8;
  --color-amber: #f08c00;
  --color-amber-bg: #fff4e6;
  --color-badge-new: #3b6ef0;
  --color-green: #00a35a;
  --color-green-bg: #e7f7ef;
  --color-violet: #7c4dff;
  --color-violet-bg: #f3effe;
  --color-coral-tint: #fff0ef;
  --color-coral-tint-border: #ffd5d1;

  /* ── 색상: 고정 브랜드 ── */
  --color-youtube: #ff0000;
  --color-instagram: #e1306c;
  --color-blog: #2db400;
  --color-mp3: #e73743;
  --color-mp3-hover: #bd2d37;
  /* 헤더 MP3 버튼의 흐르는 색 띠 — 진한 쪽(deep) ↔ 기본(base) ↔ 밝은 쪽(bright).
     셋 다 순수 레드 계열(hue 0도 부근)에서 채도를 높게 잡았다 — 주황 쪽으로 넘어가면 흙빛이 섞여 탁해 보인다 */
  --mp3-deep: #cf1130;
  --mp3-base: #e73743;
  --mp3-bright: #ff5252;

  /* ── 색상: 오버레이 ── */
  --color-toast-bg: rgba(13, 22, 42, 0.78);  /* 반투명 다크 네이비 — 토스트 배경 · 라이트박스 카운터 pill */
  --color-overlay: rgba(33, 37, 41, 0.65);   /* 딤 — 모달·시트·메가메뉴 뒤 (모든 오버레이 공통, 알파 분기 금지 · 2026-07-24 0.5→0.65 영상 팝업 대비 강화) */

  /* ── 타이포: 폰트 패밀리 ── */
  --font-base: Paperlogy, Pretendard, "Noto Sans KR", 돋움, Dotum, "Apple SD Gothic Neo", Helvetica, sans-serif;
  --font-body: Pretendard, "Noto Sans KR", 돋움, Dotum, "Apple SD Gothic Neo", Helvetica, sans-serif;  /* 긴 본문용 — 가독성이 우선인 서술형 텍스트(도서 상세 「책 소개」 등)에만 사용 */

  /* ── 타이포: 크기 스케일 (13단계) ── */
  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 15px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --text-6xl: 40px;

  /* ── 타이포: 굵기 ── */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ── 간격 (4px 기반) ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;

  /* ── 라운드 스케일 ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-tab: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── 그림자 ── */
  --shadow-cover: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-soft: 0 2px 12px rgba(0,0,0,0.10);
  --shadow-floating: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-dark: 0 16px 40px rgba(0,0,0,0.45); /* 다크 섹션 위 카드 전용 */
  --shadow-focus-ring: 0 0 0 3px rgba(27,109,218,0.08);       /* 포커스 링 — 입력 요소에 파란 광 (헤더 검색창) */
  --shadow-lift-blue: 0 6px 16px rgba(27,109,218,0.1);        /* 파란빛 리프트 — 작은 카드/버튼 hover */
  /* 헤더 MP3 버튼 — 평상시(lift) · 마우스 올렸을 때(glow) · 윗면 광택선(inner) */
  --mp3-lift: 0 3px 12px rgba(231,55,67,0.32);
  --mp3-glow: 0 6px 20px rgba(231,55,67,0.5);
  --mp3-inner: inset 0 1px 0 rgba(255,255,255,0.28);
  --shadow-lift-blue-strong: 0 16px 32px rgba(27,109,218,0.1); /* 파란빛 리프트(강) — 큰 카드 hover */

  /* ── 상태 ── */
  --opacity-disabled: 0.35; /* 비활성 컨트롤 — 색을 바꾸지 않고 원래 색을 연하게 (슬라이더 화살표) */

  /* ── 모션 ── */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.3s;
  --ease-default: ease;
  --ease-out: ease-out;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── z-index 레이어 (로컬 스태킹 0·1·2는 리터럴 유지) ── */
  --z-dropdown: 50;
  --z-sticky: 90;
  --z-header: 100;
  --z-mega: 110;
  --z-submenu: 120;
  --z-drawer: 200;
  --z-overlay: 999;
  --z-modal: 1000;
}