/* =========================================================
   DUO-T 디자인 토큰
   - 3축 컬러: Lead(주도) Express(표현) Pace(속도)
   - 나/파트너 듀얼 시스템 (Phase 2 커플 매칭에서 활용)
   - 8pt grid · Pretendard
   ========================================================= */

:root {
  /* ── 3축 컬러 ──────────────────────────────────────── */
  --c-lead-l:      #ff5e87;   /* L 주도 — 핫 핑크 */
  --c-lead-w:      #f9a8d4;   /* W 따름 — 연 핑크 */
  --c-express-e:   #fbbf24;   /* E 표현 — 골드 */
  --c-express-i:   #a3a3c4;   /* I 아끼기 — 라일락 그레이 */
  --c-pace-f:      #f43f5e;   /* F 빠름 — 체리 레드 */
  --c-pace-s:      #818cf8;   /* S 천천히 — 인디고 */

  /* ── 나/파트너 시스템 컬러 ─────────────────────────── */
  --c-me:          #ec4899;   /* 나 — 핫 핑크 (모든 카드 메인) */
  --c-partner:     #3b82f6;   /* 파트너 — 블루 (Phase 2) */
  --c-chemistry:   #a855f7;   /* 케미 — 두 색이 만나는 보라 (Phase 2) */

  /* ── 배경/표면/텍스트 (다크 로맨틱 톤) ─────────────── */
  --bg-0:          #0d0a18;   /* 가장 깊은 배경 — 네이비 다크 */
  --bg-1:          #1a1430;   /* 카드 배경 */
  --bg-2:          #261d44;   /* hover/active */
  --bg-glass:      rgba(255, 255, 255, 0.04);
  --bg-glass-hi:   rgba(255, 255, 255, 0.08);
  --border:        rgba(255, 255, 255, 0.10);
  --border-hi:     rgba(255, 255, 255, 0.20);

  --txt:           #fdf2f8;
  --txt-hi:        #ffffff;
  --txt-dim:       #cdb4d8;
  --txt-mute:      #816e8f;

  /* ── 시멘틱 ───────────────────────────────────────── */
  --color-success: #4ade80;
  --color-warn:    #fbbf24;
  --color-danger:  #f43f5e;

  /* ── 간격 (8pt grid) ──────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ── 모서리 ───────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── 그림자 ───────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-glow-me:      0 0 32px rgba(236, 72, 153, 0.45);
  --shadow-glow-partner: 0 0 32px rgba(59, 130, 246, 0.45);
  --shadow-glow-chem:    0 0 40px rgba(168, 85, 247, 0.5);

  /* ── 타이포 ───────────────────────────────────────── */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system,
               BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-display: 'Pretendard Variable', sans-serif;
  --font-mono: 'JetBrains Mono', 'D2Coding', monospace;

  --fz-xs: 11px;
  --fz-sm: 13px;
  --fz-md: 15px;
  --fz-lg: 18px;
  --fz-xl: 22px;
  --fz-2xl: 28px;
  --fz-3xl: 36px;
  --fz-display: 56px;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  --tracking-tight: -0.04em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.05em;

  /* ── 모션 ─────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);

  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
  --dur-draw: 1400ms;
  --dur-count: 1500ms;

  /* ── z-index 레이어 ───────────────────────────────── */
  --z-orb: 1;
  --z-base: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 10000;
}