/*
 * tokens.css — 프로젝트 로움 디자인 토큰 (잉크빛 천문 / Ink Cosmos)
 * ============================================================
 * 다크 코스믹 영혼 유지 + 음량 1/4 + 단일 발광 오레리 한 방.
 * 톤: 잉크빛 우주 배경 + 글래스 카드(흰색 헤어라인) + 톤다운 민트 액센트 +
 *     골드 의식색(점적) + 명조 헤드라인. 미니멀 다크 프리미엄.
 * 모든 컴포넌트는 이 변수만 사용. 색 변경은 이 파일만.
 * 2026-06-22 리뉴얼: 토큰 이름 유지 + 값 재정의 → 전 컴포넌트 자동 리테마.
 *   (구 다크코스믹 #0e0d18/네온민트 #63EA89 → 잉크 #0A0817/톤다운민트 #5BE0A0)
 */
:root {
  /* ── 베이스: 잉크빛으로 더 깊게 ── */
  --color-bg-canvas:   #0A0817;
  --color-bg-elevated: #16142A;
  --color-bg-sunken:   #110F22;
  --color-bg-overlay:  rgba(8, 7, 18, 0.88);

  /* ── 텍스트: 순백 금지(halation 방지), 3티어 + 강조 ── */
  --color-text-primary:   #ECEAF6;
  --color-text-secondary: #ABA4C2;
  --color-text-tertiary:  #9794B0;
  --color-text-inverse:   #0A0817;
  --color-text-strong:    #C7F2DB;   /* 본문 강조 = 민트 톤다운(형광 산만 방지) */

  /* ── 메인 액센트: 민트 (채도 미세 다운, 글로우 억제) ── */
  --color-accent:      #5BE0A0;
  --color-accent-deep: #3FCB8C;
  --color-accent-soft: #7FE9B8;
  --color-accent-mist: rgba(91, 224, 160, 0.12);

  /* ── 골드: 길조/프리미엄 CTA 의식색(점적) ── */
  --color-butter: #C9A24B;

  /* ── 코너/오로라 장식색 (톤다운: 우주 앰비언트) ── */
  --color-deco-peach: #7E5AA0;   /* 무딘 보라 (구 마젠타) */
  --color-deco-coral: #C46E78;   /* 무딘 코랄 */
  --color-deco-sky:   #5B53A8;   /* 딥 바이올렛 */

  /* ── 보조 ── */
  --color-peach:    var(--color-accent);
  --color-moss:     var(--color-accent);
  --color-sand:     #1E1B33;
  --color-sky:      #7C6FE0;   /* 바이올렛 (라벨/미래 상태) */
  --color-lavender: #9B8CD6;
  --color-solar-ash:#74708C;

  /* ── 의미색 ── */
  --color-state-current: var(--color-accent);
  --color-state-past:    var(--color-text-tertiary);
  --color-state-future:  #7C6FE0;
  --color-warning:       #E0746E;

  /* ── 오방색 오행(디새추레이트, 액센트/글로우 전용 — 본문 풀톤 금지) ── */
  --stem-wood:  #5BC98A;   /* 목 청록 */
  --stem-fire:  #E0746E;   /* 화 적 */
  --stem-earth: #D8B45C;   /* 토 황 */
  --stem-metal: #A6AEC0;   /* 금 백(순백 금지) */
  --stem-water: #6FA3E8;   /* 수 남 */

  /* ── 구조선: 1px 흰색 헤어라인(2px 라벤더 보더 폐기) ── */
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(91, 224, 160, 0.45);
  --hairline: 1px solid var(--color-border-default);

  /* ── 그림자: 깊이 + 절제된 민트 글로우 ── */
  --shadow-soft:   0 2px 14px rgba(0,0,0,.40);
  --shadow-medium: 0 8px 32px rgba(0,0,0,.36);
  --shadow-strong: 0 12px 40px rgba(0,0,0,.46);
  --shadow-lift:   0 16px 44px rgba(0,0,0,.50), 0 0 0 1px rgba(91,224,160,.25);   /* hover: 민트 링 */
  --shadow-float:  0 18px 50px rgba(0,0,0,.52);
  --glow-mint:     0 0 20px -4px rgba(91,224,160,.40);

  /* ── 폰트: Poppins 디스플레이 폐기 → Pretendard UI + 명조 헤드라인(800 상한, 900 미로드) ── */
  --font-display: "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-serif:   "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.04);
  --glass-blur:   blur(14px) saturate(160%);
  --glass-border: var(--color-border-default);
  --glass-film:   rgba(22, 20, 42, 0.62);   /* 텍스트 영역 뒤 솔리드 백킹(대비 고정) */

  /* ── 모션 토큰 ── */
  --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(91,201,138,.50);
  --fire-fill:  rgba(224,116,110,.50);
  --earth-fill: rgba(216,180,92,.52);
  --metal-fill: rgba(166,174,192,.50);
  --water-fill: rgba(111,163,232,.50);
  --wood-bg:  rgba(91,201,138,.15);
  --fire-bg:  rgba(224,116,110,.15);
  --earth-bg: rgba(216,180,92,.16);
  --metal-bg: rgba(166,174,192,.15);
  --water-bg: rgba(111,163,232,.15);

  /* ════════ 레거시 변수 매핑 (기존 코드 호환 — 전부 새 팔레트로 리포인트) ════════ */
  --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(91,224,160,.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.74 0.10 175);
    --stem-fire:  oklch(0.66 0.14 28);
    --stem-earth: oklch(0.78 0.11 88);
    --stem-metal: oklch(0.74 0.02 270);
    --stem-water: oklch(0.70 0.11 255);
  }
}

@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;
  }
}