/*
 * tokens.css — 프로젝트 로움 디자인 토큰 (종이 위 자정 잉크 / Ink on Paper)
 * ============================================================
 * Brand v2 리테마: 다크 코스믹의 명암을 완전 반전.
 * 톤: 크림 종이 바탕 + 자정 잉크 텍스트 + 여명 그라디언트(라벤더→피치)가 유일한 장식.
 *     글래스 카드(흰 프로스트 헤어라인) + 라벤더 소프트 섀도 + 함렛 헤드라인.
 * 모든 컴포넌트는 이 변수만 사용. 색 변경은 이 파일만.
 * 잉크 블록(캐릭터 카드/오레리 등 일러스트 서피스)만 다크로 남고, 그 외 전 표면은 라이트.
 *   (구 잉크 우주 #0A0817/톤다운민트 #5BE0A0 → 종이 #FBFAF8/여명 라벤더 #8F7BF0)
 */
:root {
  /* ── 베이스: 크림 종이 + 화이트 서피스 ── */
  --color-bg-canvas:   #FBFAF8;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken:   #F3F0E9;
  --color-bg-overlay:  rgba(26, 24, 48, 0.45);

  /* ── 텍스트: 자정 잉크 3티어 + 강조(강조는 굵기로, 컬러 강조 필요 시 링크색) ── */
  --color-text-primary:   #1A1830;
  --color-text-secondary: #5B5570;
  --color-text-tertiary:  #8C879B;
  --color-text-inverse:   #FBFAF8;
  --color-text-strong:    #1A1830;   /* 본문 강조 = 잉크(굵기로 강조, 컬러 필요 시 #4A3FB5) */

  /* ── 메인 액센트: 여명 라벤더 (라이트 표면 발광 최소화) ── */
  --color-accent:      #8F7BF0;
  --color-accent-deep: #6D5AE6;
  --color-accent-soft: #A99CF4;
  --color-accent-mist: rgba(143, 123, 240, 0.12);

  /* ── 골드: 길조/프리미엄 CTA 의식색(점적, 코인 골드 아이덴티티 유지) ── */
  --color-butter: #C9A24B;

  /* ── 새벽 워시 장식색 (여명 계열: 라벤더/피치/오키드/블루) ── */
  --color-deco-peach: #F6B58F;   /* 여명 피치 */
  --color-deco-coral: #D8A6E8;   /* 여명 오키드 */
  --color-deco-sky:   #C7DBFF;   /* 새벽 블루 */

  /* ── 보조 ── */
  --color-peach:    var(--color-accent);
  --color-moss:     var(--color-accent);
  --color-sand:     #ECE7DC;
  --color-sky:      #6D5AE6;   /* 여명 딥 (라벨/미래 상태) */
  --color-lavender: #8F7BF0;
  --color-solar-ash:#8C879B;

  /* ── 의미색 ── */
  --color-state-current: var(--color-accent);
  --color-state-past:    var(--color-text-tertiary);
  --color-state-future:  #6D5AE6;
  --color-warning:       #D95F58;

  /* ── 오방색 오행(라이트 대비판 — 크림 위 가독 확보) ── */
  --stem-wood:  #3E9E6B;   /* 목 청록 */
  --stem-fire:  #D95F58;   /* 화 적 */
  --stem-earth: #C09A3E;   /* 토 황 */
  --stem-metal: #7E879B;   /* 금 백(라이트 대비) */
  --stem-water: #4E86D8;   /* 수 남 */

  /* ── 십신 그룹색(GROUP_COLOR var()화 — 라이트 대비판) ── */
  --tenshin-bigyeop:   #3E9E6B;
  --tenshin-siksang:   #E08D63;
  --tenshin-jaeseong:  #C09A3E;
  --tenshin-gwanseong: #6D5AE6;
  --tenshin-inseong:   #4E86D8;

  /* ── 구조선: 1px 잉크 헤어라인 ── */
  --color-border-subtle:  rgba(26, 24, 48, 0.06);
  --color-border-default: rgba(26, 24, 48, 0.08);
  --color-border-strong:  rgba(143, 123, 240, 0.45);
  --hairline: 1px solid var(--color-border-default);

  /* ── 그림자: 라벤더 틴트 소프트(라이트 표면 발광 최소화) ── */
  --shadow-soft:   0 2px 14px rgba(87,73,150,.10);
  --shadow-medium: 0 8px 32px rgba(87,73,150,.12);
  --shadow-strong: 0 12px 40px rgba(87,73,150,.16);
  --shadow-lift:   0 16px 44px rgba(87,73,150,.18), 0 0 0 1px rgba(143,123,240,.30);   /* hover: 라벤더 링 */
  --shadow-float:  0 24px 60px rgba(87,73,150,.14);
  --glow-mint:     0 0 20px -4px rgba(143,123,240,.18);

  /* ── 폰트: Hahmlet 헤드라인(serif 선두) + Pretendard UI ── */
  --font-display: "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-serif:   "Hahmlet", "Nanum Myeongjo", "Pretendard", "Apple SD Gothic Neo", serif;
  --font-sans:    "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Noto Sans Mono CJK KR", monospace;

  /* ── 텍스트 크기 ── */
  --text-display:    clamp(2.4rem, 7vw, 4rem);   /* 함렛 헤드라인 (800 상한) */
  --text-headline-1: clamp(1.6rem, 4vw, 2.25rem);
  --text-headline-2: 1.375rem;
  --text-body-large: 1.0625rem;   /* 17px 본문 */
  --text-body:       1rem;
  --text-body-small: 0.9375rem;
  --text-caption:    0.8125rem;
  --text-tiny:       0.75rem;

  /* ── 행간 / 자간 ── */
  --leading-tight:   1.25;        /* 함렛 헤드라인 */
  --leading-body:    1.7;         /* 롱폼 본문 */
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;
  --tracking-tight:  -0.02em;
  --tracking-body:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.14em;      /* (잔존 — 2단계 uppercase sweep에서 점진 제거) */

  /* ── 본문 measure(줄길이) 캡 — 롱폼 가독성 신규 ── */
  --measure: 44ch;

  /* ── 스페이싱 ── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ── 라운드 스케일 ── */
  --r-sm:   12px;
  --r-md:   14px;   /* 버튼 */
  --r-lg:   20px;   /* 카드 */
  --r-pill: 999px;

  /* ── 글래스 표준값 통일 (라이트 프로스트) ── */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-blur:   blur(14px) saturate(160%);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-film:   rgba(255, 255, 255, 0.6);   /* 텍스트 영역 뒤 프로스트 백킹(대비 고정) */

  /* ── 모션 토큰 ── */
  --motion-fast: 180ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @supports linear() 시 멀티스톱 업그레이드 */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --stagger: 90ms;

  /* ── 오레리 개인화: 결과 시 JS가 주도/보강 오행색 주입(4단계) ── */
  --orrery-hue: var(--color-accent);

  /* ── 오행 viz 채움색 (오행 토큰 기반 — 바/도넛, 라이트 표면용) ── */
  --wood-fill:  rgba(62,158,107,.55);
  --fire-fill:  rgba(217,95,88,.55);
  --earth-fill: rgba(192,154,62,.55);
  --metal-fill: rgba(126,135,155,.55);
  --water-fill: rgba(78,134,216,.55);
  --wood-bg:  rgba(62,158,107,.12);
  --fire-bg:  rgba(217,95,88,.12);
  --earth-bg: rgba(192,154,62,.12);
  --metal-bg: rgba(126,135,155,.12);
  --water-bg: rgba(78,134,216,.12);

  /* ════════ 레거시 변수 매핑 (기존 코드 호환 — 전부 새 라이트 팔레트로 리포인트) ════════ */
  --bg:    var(--color-bg-canvas);
  --card:  var(--color-bg-elevated);
  --card2: var(--color-bg-sunken);
  --border: var(--color-border-default);
  --text:  var(--color-text-primary);
  --sub:   var(--color-text-secondary);
  --muted: var(--color-text-tertiary);
  --gold:  var(--color-butter);
  --gold2: var(--color-accent-mist);
  --neon-orange: var(--color-accent);
  --neon-orange-soft: var(--color-accent-soft);
  --neon-amber: var(--color-accent-deep);
  --neon-purple: var(--color-sky);
  --neon-purple-soft: var(--color-lavender);
  --neon-purple-glow: rgba(143,123,240,.18);
  --wood:  var(--stem-wood);
  --fire:  var(--stem-fire);
  --earth: var(--stem-earth);
  --metal: var(--stem-metal);
  --water: var(--stem-water);
  --r:  var(--r-lg);
  --r2: var(--r-sm);
}

@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, 0.5 25%, 1.1 55%, 0.98 75%, 1); }
}

@supports (color: oklch(0.7 0.1 175)) {
  :root {
    --stem-wood:  oklch(0.62 0.11 158);
    --stem-fire:  oklch(0.61 0.16 27);
    --stem-earth: oklch(0.68 0.10 90);
    --stem-metal: oklch(0.60 0.025 262);
    --stem-water: oklch(0.61 0.13 258);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--color-bg-elevated); --glass-blur: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════
 * 다크모드 — 버튼 옵트인(localStorage roum-theme), prefers-color-scheme 미사용.
 * 라이트 :root 값을 재정의만 하는 additive 층(선택자 특이도 (0,2,0) > 라이트 :root (0,1,0)).
 * 잉크 블록 4종(.char-card/.cc-preview/.story-card/.export-card)은 styles.css에서
 *   다크 오버라이드 금지(이중반전 붕괴) — 여기 토큰 스위치만 반영.
 * 레거시 매핑(--bg/--card/--wood…)은 var() 참조라 자동 전환(직접 리터럴은 --neon-purple-glow만).
 * ════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-canvas:   #131120;
  --color-bg-elevated: #1E1B33;
  --color-bg-sunken:   #0F0D1A;
  --color-bg-overlay:  rgba(8, 7, 18, 0.6);

  --color-text-primary:   #F0EDE6;
  --color-text-secondary: #B5AFC6;
  --color-text-tertiary:  #8C879B;
  --color-text-inverse:   #1A1830;
  --color-text-strong:    #F0EDE6;

  --color-accent:      #A292F5;
  --color-accent-deep: #8F7BF0;
  --color-accent-soft: #B9ACF8;
  --color-accent-mist: rgba(143, 123, 240, 0.16);

  --color-butter: #E0BA6A;

  --color-deco-peach: #F6B58F;
  --color-deco-coral: #D8A6E8;
  --color-deco-sky:   #5F79B8;

  --color-sand:      #2A2740;
  --color-sky:       #A292F5;
  --color-lavender:  #A292F5;
  --color-solar-ash: #8C879B;

  --color-state-future: #A292F5;
  --color-warning:      #E0746E;

  /* 십신 그룹색(GROUP_COLOR var()화 — 다크 대비판) */
  --tenshin-bigyeop:   #5BC98A;
  --tenshin-siksang:   #F0A05B;
  --tenshin-jaeseong:  #E0C95B;
  --tenshin-gwanseong: #A292F5;
  --tenshin-inseong:   #6FA3E8;

  /* 오방색 오행(구 다크 검증값 재사용) */
  --stem-wood:  #5BC98A;
  --stem-fire:  #E0746E;
  --stem-earth: #D8B45C;
  --stem-metal: #A6AEC0;
  --stem-water: #6FA3E8;

  /* 구조선: 흰 헤어라인 */
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.09);
  --color-border-strong:  rgba(143, 123, 240, 0.5);

  /* 그림자: 흑색 기반 + hover 라벤더 링 */
  --shadow-soft:   0 2px 14px rgba(0, 0, 0, 0.35);
  --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.42);
  --shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-lift:   0 16px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(143, 123, 240, 0.35);
  --shadow-float:  0 24px 60px rgba(0, 0, 0, 0.45);
  --glow-mint:     0 0 20px -4px rgba(143, 123, 240, 0.22);

  /* 레거시 직접 리터럴(var() 미참조 — 유일) */
  --neon-purple-glow: rgba(143, 123, 240, 0.22);

  /* 글래스(다크 프로스트) */
  --glass-bg:     rgba(30, 27, 51, 0.66);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-film:   rgba(26, 24, 48, 0.6);

  /* 오행 viz 채움색(다크 스템 동색상 .50 / .15) */
  --wood-fill:  rgba(91, 201, 138, 0.5);
  --fire-fill:  rgba(224, 116, 110, 0.5);
  --earth-fill: rgba(216, 180, 92, 0.5);
  --metal-fill: rgba(166, 174, 192, 0.5);
  --water-fill: rgba(111, 163, 232, 0.5);
  --wood-bg:  rgba(91, 201, 138, 0.15);
  --fire-bg:  rgba(224, 116, 110, 0.15);
  --earth-bg: rgba(216, 180, 92, 0.15);
  --metal-bg: rgba(166, 174, 192, 0.15);
  --water-bg: rgba(111, 163, 232, 0.15);
}

/* 다크 스템 oklch — 라이트 @supports oklch :root(0,1,0)를 특이도(0,2,0)+후순위로 상회 */
@supports (color: oklch(0.7 0.1 175)) {
  :root[data-theme="dark"] {
    --stem-wood:  oklch(0.76 0.137 156);
    --stem-fire:  oklch(0.68 0.136 25);
    --stem-earth: oklch(0.78 0.115 87);
    --stem-metal: oklch(0.75 0.027 267);
    --stem-water: oklch(0.71 0.116 256);
  }
}

/* 투명도 감소 선호 — 다크에서도 글래스 불투명화(위 다크 블록 --glass-bg (0,2,0)를 동일 특이도+후순위로 상회) */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"] { --glass-bg: var(--color-bg-elevated); --glass-blur: none; }
}