/*
  CLIIP V3 — Design Tokens
  ==================================================================
  이 파일이 프로젝트 전체에서 유일한 :root 선언이다.
  다른 어떤 파일에서도 --변수를 새로 선언하지 않는다. (docs/02 D1)

  근거: 구 cliip.kr styles.css에 :root가 13개, !important가 2,683개
  있었고 index.html에 7,198개가 더 있었다. 같은 변수가 다른 값으로
  재정의되어 실제 적용값을 코드로 알 수 없었다. 이 파일이 잠금장치다.
*/

:root {
  /* ---------------- SURFACE (라이트 · 기본) ---------------- */
  --paper: #f8f5ef;
  --white: #ffffff;
  --surface: #f5f4f0;
  --surface-2: #efede8;
  --card-surface: #fffdf9;

  /* ---------------- INK / TEXT ---------------- */
  --ink: #141311;
  --text-main: #1f2a32;
  --text-sub: #4e5a64;
  --muted: #5f5a53;

  /* ---------------- LINE ---------------- */
  --line: #d9d4ca;
  --line-soft: #e8e3da;

  /* ---------------- BRAND ACCENT ----------------
     다크 히어로 위에서도 반전하지 않고 그대로 쓴다. */
  --accent-red: #a5163e;
  --accent-red-dark: #7f102f;
  --wine: #8a1538;
  --wine-dark: #6f102c;
  --accent-gold: #b9985a;
  --navy: #172a3d;
  --navy-soft: #28415f;

  /* ---------------- AI RESULT TINT ----------------
     "AI가 방금 만들어 냈다"는 생동감을 주는 색이다.
     ★ 결과 영역과 선택 상태에만 쓴다. 배경·본문·헤더에는 쓰지 않는다.
       전체에 깔면 V3의 아이보리·세리프 편집 톤이 무너진다.

     채도를 낮게 잡은 이유: 네온처럼 세게 넣으면 싸 보인다.
     아주 옅게 얹어야 종이 위에 빛이 스민 느낌이 난다. */
  --tint-violet: #6d4ea8;
  --tint-pink: #c46a9b;
  --tint-sky: #6a9ec4;

  /* 결과 패널 바탕. 거의 흰색에 가깝게 눕힌 3색 그라데이션. */
  --result-wash: linear-gradient(
    150deg,
    rgba(196, 106, 155, 0.10) 0%,
    rgba(109, 78, 168, 0.09) 45%,
    rgba(106, 158, 196, 0.10) 100%
  );

  /* 선택된 버튼. 남색 → 보라. 약하게. */
  --select-gradient: linear-gradient(135deg, var(--navy) 0%, var(--tint-violet) 100%);

  /* 플레이어 외곽 1px 선. 자주 → 보라. */
  --player-edge: linear-gradient(120deg,
    rgba(165, 22, 62, 0.55) 0%,
    rgba(109, 78, 168, 0.45) 55%,
    rgba(106, 158, 196, 0.30) 100%
  );

  /* ---------------- PLAYER NEON ----------------
     ★ 검은 플레이어 본체 **위에서만** 쓴다. 밝은 배경에는 쓰지 않는다.
       종이색 위에서는 대비가 모자라 읽히지 않는다.

     자주(--accent-red)는 브랜드색이라 검정 위에서 가라앉는다.
     연두 계열은 어두운 바탕에서 채도가 살아 "지금 소리가 나고 있다"를
     한눈에 알린다. 노랑보다 차갑고 현대적이다.

     재생 버튼은 자주를 유지한다 — 브랜드 표식은 하나로 둔다. */
  --player-neon: #a8e02a;
  --player-neon-dim: rgba(168, 224, 42, 0.35);

  /* ---------------- DARK HERO VARIANT ----------------
     Home / Radio 히어로 섹션 전용. .hero--dark 안에서만.
     헤더 · 풋터 · 본문 · 모달에는 적용 금지.
     별도 테마가 아니라 서피스 반전 변형이다. (docs/02 §1-3) */
  --dark-surface: #0f0f0e;
  --dark-surface-2: #1a1a17;
  --dark-ink: #f5f4ef;
  --dark-text-sub: rgba(245, 244, 239, 0.62);
  --dark-line: rgba(255, 255, 255, 0.12);

  /* ---------------- STATE ---------------- */
  --state-ok: #1d7a4c;
  --state-wait: #a8761a;
  --state-error: #a5163e;
  --state-info: #28415f;

  /* ---------------- TYPOGRAPHY ----------------
     Serif는 제목에만, Sans는 그 외 전부.
     ⚠️ Georgia에는 한글 글리프가 없다. 한글 제목은 --font-serif-ko로
     본명조 계열을 쓴다. 폰트 파일은 Stage 3에서 자체 호스팅한다.
     (docs/02 §2 · B안 채택) */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-serif-ko: "Noto Serif KR", "본명조", "Nanum Myeongjo", var(--font-serif);
  --font-sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo",
               -apple-system, "Segoe UI", Arial, sans-serif;

  /* 식별자·해시처럼 자릿수가 눈에 보여야 하는 값에만 쓴다
     (계정 메뉴의 User ID 등). 본문에는 쓰지 않는다. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  --type-meta: 11.5px;
  --type-small: 12.5px;
  --type-body: 15px;
  --type-card: 22px;
  --type-section: clamp(28px, 4vw, 42px);
  --type-hero: clamp(34px, 5.4vw, 60px);

  --leading-tight: 1.15;
  --leading-body: 1.55;
  --tracking-eyebrow: 0.14em;

  /* ---------------- LAYOUT ----------------
     헤더 · 본문 · 풋터가 전부 이 하나를 쓴다.
     값이 여러 개가 되는 순간 정렬이 깨진다. */
  --layout-wide: 1280px;
  --layout-reading: 1040px;
  --layout-form: 980px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---------------- SPACING SCALE (8단계) ----------------
     모든 여백은 이 중 하나다. 17px, 26px 같은 임의값 금지. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 80px;

  /* ---------------- FIXED DIMENSIONS ---------------- */
  --header-height: 88px;
  --header-border-top: 8px;
  --hero-min-height: 320px;   /* 레이아웃 시프트 방지 — 줄이지 말 것 */
  --btn-height: 44px;
  --btn-height-sm: 36px;
  --player-height: 64px;      /* 전역 플레이어. 본문 하단 여백 예약에 쓴다 */

  /* ---------------- RADIUS / SHADOW ---------------- */
  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-media: 10px;
  --shadow-card: 0 12px 32px rgba(40, 65, 95, 0.09);
  --shadow-pop: 0 20px 48px rgba(20, 30, 45, 0.16);
  --shadow-player: 0 -6px 20px rgba(15, 15, 14, 0.22);

  /* ---------------- Z-INDEX ---------------- */
  --z-header: 50;
  --z-player: 60;   /* 헤더보다 위 */
  --z-modal: 70;

  /* ---------------- MOTION ---------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;

  /* ---------------- BREAKPOINT ----------------
     JS(app-shell)가 이 값을 읽어 is-mobile 클래스를 토글한다. */
  --mobile-breakpoint: 760px;
}

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

@media (max-width: 760px) {
  :root {
    --hero-min-height: 240px;
    --player-height: 56px;
  }
}