/* ================================================================
   골목점집 사주허브 — 공통 디자인 토큰
   hub-premium-spec.md §3-1 색토큰 + §3-2 타이포토큰
   ================================================================ */

:root {

  /* ── 배경 계층 ── */
  --bg-base:        #0D0D0D;
  --bg-card:        #1A1A1A;
  --bg-card-deep:   #161616;
  --bg-section:     #111111;
  --bg-input:       #222222;

  /* ── 브랜드 컬러 ── */
  --color-forest:        #1B4A3C;
  --color-forest-mid:    #245F4E;
  --color-forest-bright: #4A9B82;
  --color-forest-glow:   rgba(27, 74, 60, 0.25);

  --color-amber:         #8B6914;
  --color-amber-glow:    rgba(139, 105, 20, 0.15);

  /* ── 텍스트 ── */
  --text-primary:   #FAF9F5;
  --text-secondary: rgba(250, 249, 245, 0.75);
  --text-tertiary:  rgba(250, 249, 245, 0.5);
  --text-muted:     rgba(250, 249, 245, 0.3);
  --text-green:     #4A9B82;

  /* ── 테두리 ── */
  --border-subtle:  rgba(250, 249, 245, 0.08);
  --border-card:    rgba(27, 74, 60, 0.35);
  --border-active:  rgba(27, 74, 60, 0.75);

  /* ── 오행 타일 배경 / 글자 ── */
  --ohang-wood-bg:   #1C3D2A;  --ohang-wood-text:   #6FBF8A;
  --ohang-fire-bg:   #3D1C1C;  --ohang-fire-text:   #E0705A;
  --ohang-earth-bg:  #3A2E10;  --ohang-earth-text:  #C9A23A;
  --ohang-metal-bg:  #252830;  --ohang-metal-text:  #9BA8C0;
  --ohang-water-bg:  #0F1E30;  --ohang-water-text:  #5B8DC9;

  /* ── 카카오 ── */
  --kakao-yellow:    #FEE500;
  --kakao-black:     #191919;

  /* ── 폰트 패밀리 ── */
  --font-serif: 'Noto Serif KR', serif;
  --font-sans:  'Noto Sans KR', sans-serif;

  /* ── 사이즈 스케일 ── */
  --text-xs:    10px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    17px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-hero:  46px;
  --text-hanja: 28px;

  /* ── 자간 ── */
  --tracking-hero:  -0.03em;
  --tracking-hanja:  0.08em;
  --tracking-label:  0.08em;
  --tracking-body:   0;

  /* ── 행간 ── */
  --leading-dialog: 2.2;
  --leading-body:   1.85;
  --leading-tight:  1.4;

  /* ── 접근성: 포커스 ── */
  --focus-ring: 2px solid #4A9B82;
  --focus-ring-offset: 2px;
}

/* ── 접근성: 키보드 포커스 ── */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

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