/* Blute - design tokens (color, spacing, motion vars). Change theme here. */
/* blute - 스타일시트 (index.html에서 분리) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── 뉴트럴 (스튜디오 잉크) ── */
  --ink:     #08090f;
  --bg:      #08090f;
  --shell:   #0e1018;
  --panel:   #13151f;   /* 카드 */
  --panel2:  #1a1d29;   /* 입력/컨트롤 */
  --panel3:  #232636;
  --line:    rgba(255,255,255,.07);
  --line-2:  rgba(255,255,255,.12);
  --text:    #eceef6;
  --sub:     #9aa0b6;
  --faint:   #8990ad;   /* 안내·라벨 등 의미있는 텍스트에도 쓰여 WCAG AA(4.5:1) 충족하도록 밝힘 (이전 #6a7191은 3.8:1로 미달) */

  /* ── 시그니처 (아이리스) ── */
  --accent:       #7b6cff;
  --accent-2:     #9a8bff;
  --accent-soft:  rgba(123,108,255,.14);
  --accent-line:  rgba(123,108,255,.40);
  --accent-glow:  rgba(123,108,255,.55);

  /* ── 상태 (JS가 var(--good/warn/bad/sub) 참조) ── */
  --good: #34d9a0;
  --warn: #f6c453;
  --bad:  #fb7185;

  /* ── 플랫폼 ── */
  --chzzk:   #00e59b;
  --youtube: #ff4d4d;
  --twitch:  #a974ff;

  --radius: 14px;
  --r-sm: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 14px 36px -16px rgba(0,0,0,.6);
  --sh-3: 0 36px 90px -34px rgba(0,0,0,.72);

  /* 모션 토큰 (일관된 이징/속도) */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .14s;
  --t-med: .22s;

  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ── 간격 스케일 (4px 그리드) ── */
  --sp-0: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;

  /* ── 타이포 스케일 (0.5px 단계 제거, 7단계) ── */
  --fs-1: 11px;   /* 마이크로 라벨·배지·setting-val·mono */
  --fs-2: 12px;   /* 힌트·라벨·노트·칩·mini 버튼 */
  --fs-3: 13px;   /* 본문 기준·입력·표준 버튼 */
  --fs-4: 15px;   /* 카드 제목(sec-title)·로그인 버튼·계정명 */
  --fs-5: 18px;   /* 브랜드명 */
  --fs-6: 22px;   /* Plus 모달 제목 */
  --fs-7: 30px;   /* 요금 숫자 */
  --lh-tight: 1.2; --lh-snug: 1.45; --lh-body: 1.6;

  /* ── accent 위 잉크 + 아이리스 시그니처(한 곳에서 정의) ── */
  --on-accent: #0a0b13;
  --on-good:   #04231a;
  --grad-iris: linear-gradient(160deg, var(--accent-2), var(--accent));
  --grad-iris-sheen: inset 0 1px 0 rgba(255,255,255,.28);
  --grad-amber: linear-gradient(160deg, #ffd34d, #ff9a3d);
  --on-amber: #3a2400;

  /* ── 표면/입력/하이라이트 토큰 ── */
  --shell-2: #0a0c12;   /* input/select focus 배경 */
  --bg-code: #0a0c12;   /* url-readonly 배경 */
  --hl-1: rgba(255,255,255,.04);
  --hl-2: rgba(255,255,255,.08);

  /* ── 상태 틴트 (실제 good/warn/bad에서 파생 → 초록은 늘 같은 초록) ── */
  --good-bg: rgba(52,217,160,.10);  --good-fg: #7ce8c2;  --good-line: rgba(52,217,160,.24);
  --warn-bg: rgba(246,196,83,.10);  --warn-fg: #f3cf86;  --warn-line: rgba(246,196,83,.26);
  --bad-bg:  rgba(251,113,133,.10); --bad-fg:  #fca6b0;  --bad-line:  rgba(251,113,133,.28);

  /* 라운드 사다리 보강 (xs 6 / sm 10 / md 12 / lg 14 / xl 20) */
  --r-xs: 6px; --r-md: 12px;

  /* 모션·포커스 */
  --t-slow: .4s;
  --focus-ring: 0 0 0 3px var(--accent-soft);
}