/* Lumi 디자인 토큰 — 모바일 퍼스트 / 라이트 모드 */

:root {
  /* === 시그니처 4색 (구름 위 햇살) === */
  --signature-1: #FF6B8B;
  --signature-2: #DDA0DD;
  --signature-3: #EDD080;
  --signature-4: #DABA65;

  /* === 액센트 (강조용 핑크 단계) === */
  --pink-50:  #FFE6EE;
  --pink-100: #FFD0DD;
  --pink-200: #F7C5D3;  /* history/comments 등에서 var(--pink-200, #f7c5d3) fallback 으로 사용 */
  --pink-300: #E89AB1;
  --pink-400: #D87595;  /* 300↔500 사이 — comments/insights/pricing 에서 참조 */
  --pink-500: #C8507A;
  --pink-600: #B14770;  /* link hover · chan-retry hover 등 강조용 */
  --pink-700: #A13D61;
  --pink-900: #6F2A43;
  --accent:   var(--signature-1);  /* 강조 인디케이터(히어로 점 등) — 전역 focus 링과 동일 톤 */

  /* === 뉴트럴 (Apple iOS 톤) === */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafaf9;
  --neutral-100: #f5f5f4;
  --neutral-200: #e5e5e4;
  --neutral-300: #c7c7cc;
  --neutral-400: #aeaeb2;
  --neutral-500: #8e8e93;
  --neutral-600: #6e6e73;
  --neutral-700: #424245;
  --neutral-800: #1d1d1f;
  --neutral-900: #0d1117;

  /* === 시맨틱 === */
  --bg:           var(--neutral-0);
  --bg-card:      var(--neutral-0);
  --bg-soft:      var(--neutral-50);
  --bg-deep:      var(--neutral-100);
  --ink:          var(--neutral-800);
  --ink-soft:     var(--neutral-700);
  --ink-muted:    var(--neutral-600);  /* WCAG AA: neutral-500(#8e8e93)=2.9:1 미달 → 600(#6e6e73)=~5:1 */
  --line:         rgba(13, 17, 23, 0.08);
  --line-strong:  rgba(13, 17, 23, 0.14);

  /* === 그라디언트 === */
  --gradient-signature: linear-gradient(135deg,
    var(--signature-1) 0%,
    var(--signature-2) 33%,
    var(--signature-3) 66%,
    var(--signature-4) 100%);
  /* 흰 배경 텍스트 clip 용 — 시그니처 4색은 노랑·골드 stop 이 흐려 헤드라인이 안 읽힘.
     핑크 계열만 유지해 대비 확보(가독). 텍스트에 background-clip 할 때만 사용. */
  --gradient-signature-text: linear-gradient(120deg,
    var(--signature-1) 0%,
    var(--pink-500) 60%,
    var(--pink-600) 100%);
  --gradient-soft: linear-gradient(180deg,
    rgba(255, 107, 139, 0.04) 0%,
    rgba(255, 107, 139, 0) 100%);

  /* === 폰트 === */
  --font-system: 'Pretendard Variable', Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo',
    'Noto Sans KR', sans-serif;

  --text-display:  clamp(40px, 9vw, 72px);
  --text-headline: clamp(24px, 5.5vw, 36px);
  --text-title:    clamp(18px, 3vw, 22px);
  --text-body-lg:  17px;
  --text-body:     15px;
  --text-body-sm:  14px;
  --text-caption:  13px;
  --text-h3:       18px;  /* 카드·모달 제목(bold) */
  --text-label:    12px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.025em;
  --tracking-normal: -0.011em;

  /* === 여백 (4px 베이스) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-32: 128px;

  --page-x: clamp(20px, 5vw, 40px);

  /* === 모양 === */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 980px;
  --radius-full: 9999px;
  --radius-card: var(--radius-lg);  /* 카드 공통 라운드 (16px) */

  /* === 그림자 === */
  --shadow-xs: 0 1px 2px rgba(13, 17, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.06),
               0 2px 4px rgba(13, 17, 23, 0.04);
  --shadow-md: 0 2px 4px rgba(13, 17, 23, 0.08),
               0 4px 8px rgba(13, 17, 23, 0.04);
  --shadow-lg: 0 4px 8px rgba(13, 17, 23, 0.10),
               0 12px 32px rgba(13, 17, 23, 0.08);
  --shadow-xl: 0 8px 16px rgba(13, 17, 23, 0.12),
               0 24px 64px rgba(13, 17, 23, 0.10);

  --shadow-card:         var(--shadow-sm);  /* 카드 기본 elevation */
  --shadow-card-pressed: var(--shadow-xs);  /* 카드 눌림(press) 피드백 */

  --shadow-glow-sm: 0 4px 16px -4px rgba(255, 107, 139, 0.32);
  --shadow-glow:    0 8px 28px -6px rgba(255, 107, 139, 0.45);
  --shadow-glow-lg: 0 16px 48px -10px rgba(255, 107, 139, 0.55);

  /* === 디자인 sprint R1 — 시그니처 침투용 토큰 (가입 후 5페이지) ===
     가입 전 (index/beta) 와의 시그니처 단절 해결.
     warm-glow: 따뜻한 핑크·골드 톤 glow (글로우보다 옅음 — 데이터 카드용)
     paper: 베이지·종이 느낌 그라데이션 (empty / 설정 카드 BG 용 — 흰색 → 종이)
     R2: alpha 2배 (R1 5 Critic 합의 — 너무 옅어 인지 못 함) */
  --shadow-warm-glow: 0 12px 32px -8px rgba(255, 107, 139, 0.18),
                      0 4px 12px -4px rgba(237, 208, 128, 0.12);
  --gradient-paper:   linear-gradient(135deg,
                        rgba(237, 208, 128, 0.10) 0%,
                        rgba(255, 192, 203, 0.07) 50%,
                        rgba(255, 255, 255, 0) 100%);

  /* === 모션 === */
  --ease-toss:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:   cubic-bezier(0.2, 0.9, 0.3, 1.4);

  --duration-instant: 80ms;
  --duration-snap:    140ms;
  --duration-fast:    220ms;
  --duration-base:    400ms;
  --duration-slow:    700ms;

  /* === 레이아웃 === */
  --tap-min:  44px;
  --btn-h:    52px;
  --btn-h-lg: 64px;
  --nav-h:    56px;

  /* === Z-Index === */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;

  /* === 상태 색 — badge/status/chip 시각 (audit #6 토큰화) ===
     기존: 각 페이지마다 #fff8e8/#c08400/#e8f4ff/#0867b8 등 흩어져 있음
     새: 한 곳에 정의 + 페이지에서 var() 참조 — 명도 통일 + 토큰 변경 1곳 */
  --status-pending-bg:    #fff8e8;
  --status-pending-fg:    #c08400;
  --status-ready-bg:      #e8f4ff;
  --status-ready-fg:      #0867b8;
  --status-scheduled-bg:  #fff0f5;
  --status-scheduled-fg:  var(--pink-500);
  --status-success-bg:    #e8f5ee;
  --status-success-fg:    #00713c;
  --status-error-bg:      #fde8e8;
  --status-error-fg:      #b8221c;
  --status-warning-bg:    #fff8ea;
  --status-warning-fg:    #92560f;
  --status-warning-line:  #f5a623;

  /* IG / Threads 채널 칩 */
  --chan-ig-bg:        #fce7f3;
  --chan-ig-fg:        #be185d;
  --chan-threads-bg:   #e0e7ff;
  --chan-threads-fg:   #3730a3;
  --chan-fail-bg:      #fee2e2;
  --chan-fail-fg:      #b91c1c;

  /* 흔히 쓰이는 overlay */
  --overlay-dim:       rgba(0, 0, 0, 0.5);
  --overlay-dim-soft:  rgba(0, 0, 0, 0.25);
}