/* tokens.css — 디자인 토큰 (포스터 기반 재정의) */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Noto+Serif+KR:wght@300;400;500;700&family=Noto+Sans+KR:wght@300;400;500&display=swap');

:root {
  /* ── 색상 팔레트 (포스터 기반 — 냉색조 시네마틱) ── */
  --c-bg:           #06080a;   /* 거의 검정, 쿨 언더톤 */
  --c-surface:      #0c1014;   /* 카드/패널 배경 */
  --c-surface-mid:  #111820;   /* 중간 표면 */
  --c-surface-light:#192028;   /* 밝은 표면 */
  --c-glass-tint:   rgba(160, 210, 220, 0.04);
  --c-glass-edge:   rgba(180, 220, 230, 0.12);

  --c-label-bg:     #e8eef2;   /* 레이블 아이보리→쿨 화이트 */
  --c-label-text:   #0a0e12;
  --c-label-border: #9ab0c0;

  --c-accent:       #5cc8c4;   /* 포스터 틸 */
  --c-accent-dim:   rgba(92, 200, 196, 0.28);
  --c-accent-glow:  rgba(92, 200, 196, 0.07);
  --c-pulse:        rgba(92, 200, 196, 0.75);
  --c-pulse-ring:   rgba(92, 200, 196, 0.18);
  --c-accent-bright:#8adad6;   /* 밝은 틸 하이라이트 */

  --c-white-light:  rgba(255, 255, 255, 0.92); /* 포스터 백라이트 */
  --c-white-glow:   rgba(255, 255, 255, 0.06);
  --c-dot-pattern:  rgba(92, 200, 196, 0.22);  /* 점 패턴 */

  --c-amber:        #c8a84a;
  --c-amber-dim:    rgba(200, 168, 74, 0.35);

  --c-text:         #c4d0d8;   /* 쿨 크림 */
  --c-text-muted:   #6a8090;
  --c-text-dim:     #3a4a58;

  --c-white:        #ffffff;
  --c-overlay:      rgba(6, 8, 10, 0.88);

  /* ── 타이포그래피 ─────────────────────────────── */
  --font-mono:   'Space Mono', 'Courier New', monospace;
  --font-serif:  'Noto Serif KR', 'Georgia', serif;
  --font-sans:   'Noto Sans KR', 'Arial', sans-serif;

  --text-xs:   0.625rem;
  --text-sm:   0.75rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  /* ── 간격 ─────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── 모션 ─────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-mid:     300ms;
  --dur-slow:    600ms;
  --dur-xslow:   1200ms;

  /* ── 기타 ─────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --panel-width: 500px;
  --z-canvas:   1;
  --z-diorama:  10;
  --z-hotspot:  20;
  --z-panel:    30;
  --z-intro:    100;
}