/* =========================================================
   SYNC-T 디자인 토큰
   - 5축 컬러: Vibe(Logic↔Vibe) Drive Social Fire(Calm↔Burn) Style
   - 본캐/추구미 듀얼 시스템
   - 8pt grid · Pretendard
   ========================================================= */

:root {
  /* ── 5축 컬러 (영감 단계) ───────────────────────────── */
  --c-vibe-logic:  #4f7cff;   /* Logic — 차가운 블루 */
  --c-vibe-warm:   #ff7a90;   /* Vibe — 따뜻한 핑크 */
  --c-drive-plan:  #7b8fbf;   /* Plan — 차분한 슬레이트 */
  --c-drive-do:    #ff9a3c;   /* Do — 추진의 오렌지 */
  --c-social-solo: #6a4ec7;   /* Solo — 깊은 보라 */
  --c-social-mix:  #ffd54a;   /* Mix — 활력의 옐로우 */
  --c-fire-calm:   #2c5f8d;   /* Calm — 새벽 블루 */
  --c-fire-burn:   #ff5b3c;   /* Burn — 강렬한 코랄 */
  --c-style-fix:   #5b6776;   /* Fix — 고정의 그레이 */
  --c-style-adapt: #66e5b3;   /* Adapt — 적응의 민트 */

  /* ── 본캐/추구미 시스템 컬러 ────────────────────────── */
  --c-real:        #2c5f8d;   /* 본캐 기본 (사용자별 결과로 동적 갱신) */
  --c-ideal:       #ff8a65;   /* 추구미 기본 */

  /* ── 배경/표면/텍스트 (다크 톤 — 우주 분위기) ──────── */
  --bg-0:          #0a0814;   /* 가장 깊은 배경 */
  --bg-1:          #14112a;   /* 카드 배경 */
  --bg-2:          #1d1740;   /* 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.18);

  --txt:           #f4ecff;
  --txt-hi:        #ffffff;
  --txt-dim:       #aea4cc;
  --txt-mute:      #6e6685;

  /* ── 시멘틱 ───────────────────────────────────────── */
  --color-success: #66e5b3;
  --color-warn:    #ffd54a;
  --color-danger:  #ff5b3c;

  /* ── 간격 (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-real:  0 0 32px rgba(44, 95, 141, 0.45);
  --shadow-glow-ideal: 0 0 32px rgba(255, 138, 101, 0.45);

  /* ── 타이포 ───────────────────────────────────────── */
  --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;

  /* ── breakpoints (CSS variable로는 못 쓰지만 가이드) ─ */
  /* @media (min-width: 480px) — 모바일 large */
  /* @media (min-width: 768px) — 태블릿 */
  /* @media (min-width: 1024px) — 데스크톱 */
}

/* 라이트 모드는 Phase 2 — 일단 다크만 */