/* =====================================================================
   Vyne 디자인 토큰 (단일 소스)
   다크 온리. 다른 CSS 파일은 raw 컬러 리터럴을 쓰지 않고 var()만 참조한다.
   시안 팔레트 원본을 그대로 옮김.
   ===================================================================== */
:root {
  color-scheme: dark;

  /* ---- 표면 / 배경 ---- */
  --bg:          #141416; /* 페이지 최외곽 */
  --surface-0:   #0E0E10; /* 섹션/캔버스 딥 */
  --surface-1:   #17171A; /* 카드·칩 */
  --surface-2:   #222226; /* 입력·플로팅 */

  /* ---- 텍스트 ---- */
  --text:        #EDEDEF; /* 본문 강조 */
  --text-muted:  #8B8B91; /* 보조 */
  --text-dim:    #5C5C62; /* 흐린 */
  --text-faint:  #3D3D42; /* 가장 흐린 */
  --on-accent:   #0E0E10; /* 보라/골드 버튼 위 글자 */

  /* ---- 브랜드 액센트 ---- */
  --app:         #9D7BCC; /* 앱 = 보라 */
  --app-hover:   #B79BDD;
  --party:       #D9BE7A; /* 파티 = 골드 */

  /* 골드 그라디언트 스탑 (페더/구분선) */
  --gold-1:      #B89A55;
  --gold-2:      #E8D5A0;
  --gold-3:      #C9A961;

  /* ---- 상태 ---- */
  --error:       #DC6464;

  /* ---- 경계선 / 오버레이 (알파 합성 토큰) ---- */
  --border:        rgba(237, 237, 239, .10);
  --border-strong: rgba(237, 237, 239, .15);
  --ring-purple:   rgba(157, 123, 204, .45);
  --scrim:         rgba(23, 23, 26, .92); /* 모바일 스티키 바 */

  /* ---- 골드 구분선 그라디언트 ---- */
  --grad-gold-rule: linear-gradient(90deg,
      transparent 0%, var(--gold-1) 20%, var(--gold-2) 50%, var(--gold-3) 80%, transparent 100%);
  --grad-gold-left:  linear-gradient(90deg, transparent, var(--party));
  --grad-gold-right: linear-gradient(90deg, var(--party), transparent);

  /* ---- 액센트 스위치 (폼 탭에 따라 JS가 교체) ---- */
  --accent:        var(--app);
  --accent-hover:  var(--app-hover);

  /* ---- 타이포 ---- */
  --font-sans:     'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;
  --font-serif-ko: 'MaruBuri', serif;
  --font-display:  'Cormorant Garamond', serif;

  /* ---- 반경 ---- */
  --r-pill: 999px;
  --r-lg:   16px;
  --r-md:   12px;
  --r-sm:   6px;

  /* ---- 레이아웃 ---- */
  --maxw: 1080px;
}