/**
 * PayWallet semantic tokens (SSOT).
 * BI 시안 03 FUTURE PAY — Toss Blue on Gray (BI 검토 v9.7 채택안).
 *
 * 팔레트는 시안 문서 그대로다: Toss Blue #3182F6 · Gray #F2F4F6 · Ink #191F28 ·
 * White #FFFFFF · Line #E5E8EB. 딱 한 곳만 계산해서 바꿨다 — CTA 면은 #1B64DA다.
 * #3182F6 위의 흰 글자는 3.71:1 이라 본문 기준(4.5:1)에 못 미치고, 지갑의 CTA는
 * 14px 볼드라 large text 예외에도 들어가지 않는다. #1B64DA 면 위 흰 글자는 5.41:1.
 * 정체성 색(#3182F6)은 앱 아이콘·그래픽처럼 글자를 얹지 않는 곳에서 그대로 쓴다.
 *
 * 모서리: Button 12px · Card 16px · 앱 아이콘 22.37% 스퀘어클. Fold 시안의 잘린
 * 대각 모서리는 이 시안에 없으므로 비대칭 radius를 전부 걷었다.
 * Keep --pw-bg/--pw-rail/--pw-ink/--pw-muted aliases for pack + legacy CSS.
 */
:root,
html[data-theme="light"],
.paywallet-root[data-theme="light"] {
  --pw-bg: #f2f4f6;
  --pw-bg-deep: #e5e8eb;
  --pw-surface: #f2f4f6;
  --pw-surface-raised: #ffffff;
  --pw-surface-muted: #f9fafb;
  --pw-panel: #ffffff;
  --pw-text: #191f28;
  /* 시안의 보조 라벨 #8B95A1 은 흰 면에서 3.04:1 이라 본문 보조에 못 쓴다.
     같은 계열을 어둡게 잡아 카드(5.5:1)와 페이지 배경(4.99:1) 양쪽을 넘긴다. */
  --pw-text-secondary: #606a76;
  --pw-text-disabled: #8b95a1;
  --pw-ink: #191f28;
  --pw-muted: #606a76;
  --pw-brand: #3182f6;
  --pw-rail: #3182f6;
  --pw-primary: #1b64da;
  --pw-primary-hover: #1957be;
  --pw-primary-pressed: #164aa0;
  --pw-rail-deep: #1b64da;
  --pw-accent: var(--pw-brand);
  --pw-accent-deep: var(--pw-primary);
  --pw-success: #047857;
  --pw-ok: #047857;
  --pw-pending: #6b5e54;
  --pw-warning: #b45309;
  --pw-amber: #b45309;
  --pw-danger: #9f1239;
  /* signal 은 텍스트로도 쓰인다 (paywallet-shell.css) — 면 색이 아니라 글자 색이라
     CTA 면과 같은 딥블루를 쓴다. 흰 면 5.41:1 · 회색 면 4.91:1. */
  --pw-signal: #1b64da;
  --pw-glow: #a7c8ff;
  --pw-sand: #f9fafb;
  --pw-border: #e5e8eb;
  --pw-line: #e5e8eb;
  --pw-focus: color-mix(in srgb, #1b64da 55%, transparent);
  --pw-focus-ring: color-mix(in srgb, #1b64da 18%, transparent);
  --pw-on-primary: #ffffff;
  --pw-touch: 2.75rem;
  --pw-space-1: 0.25rem;
  --pw-space-2: 0.5rem;
  --pw-space-3: 0.75rem;
  --pw-space-4: 1rem;
  --pw-space-5: 1.25rem;
  --pw-space-6: 1.5rem;
  --pw-space-7: 2rem;
  --pw-space-8: 2.5rem;
  --pw-radius-sm: 0.5rem;
  --pw-radius-md: 0.75rem;
  --pw-radius-lg: 1rem;
  --pw-radius-chip: 0.5rem;
  /* Button 12px · Card 16px (시안 03 radius 표) */
  --pw-radius: 0.75rem;
  --pw-radius-card: 1rem;
  --pw-sheet-margin: 1.25rem;
  --pw-ghost-bg: #f9fafb;
  /* Card stack · soft shadow: 잉크를 얇게 두 겹으로 깐다. 32px 미만 아이콘에는
     그림자를 쓰지 않는다(시안 03 아이콘 규칙). */
  --pw-elev-1: 0 1px 3px rgba(25, 31, 40, 0.08), 0 8px 24px rgba(25, 31, 40, 0.06);
  --pw-elev-2: 0 2px 6px rgba(25, 31, 40, 0.1), 0 16px 40px rgba(25, 31, 40, 0.1);
  --pw-font: var(--font-body, "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif);
  --pw-display: var(--font-display, "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif);
  --pw-mono: var(--font-mono, "DM Mono", ui-monospace, monospace);
  --pw-bp-sm: 480px;
  --pw-bp-md: 768px;
  --pw-bp-lg: 900px;
  --pw-dock-clear: 5.5rem;
  color-scheme: light;
}

html[data-theme="dark"],
.paywallet-root[data-theme="dark"] {
  --pw-bg: #10151c;
  --pw-bg-deep: #0a0e14;
  --pw-surface: #10151c;
  --pw-surface-raised: #1a212b;
  --pw-surface-muted: #151b23;
  --pw-panel: #1a212b;
  --pw-text: #f2f4f6;
  --pw-text-secondary: #b0b8c1;
  --pw-ink: #f2f4f6;
  --pw-muted: #b0b8c1;
  /* 다크에서는 딥블루가 배경과 붙어버리므로 Toss Blue 를 들어올려 쓴다.
     시안 03 은 Light 가 기본이고 다크 값을 규정하지 않아 여기서 산출했다. */
  --pw-brand: #6ba4ff;
  --pw-rail: #6ba4ff;
  --pw-primary: #6ba4ff;
  --pw-primary-hover: #8bb8ff;
  --pw-primary-pressed: #4f90f5;
  --pw-rail-deep: #3182f6;
  --pw-accent: var(--pw-brand);
  --pw-accent-deep: var(--pw-rail-deep);
  --pw-success: #34d399;
  --pw-ok: #34d399;
  --pw-pending: #b0b8c1;
  --pw-warning: #fbbf24;
  --pw-amber: #fbbf24;
  --pw-danger: #ff6b6b;
  --pw-signal: #6ba4ff;
  --pw-glow: #6ba4ff;
  --pw-sand: #151b23;
  --pw-border: rgba(242, 244, 246, 0.14);
  --pw-line: rgba(242, 244, 246, 0.14);
  --pw-focus: color-mix(in srgb, #6ba4ff 55%, transparent);
  --pw-focus-ring: color-mix(in srgb, #6ba4ff 20%, transparent);
  --pw-on-primary: #10151c;
  --pw-radius-chip: 0.5rem;
  --pw-ghost-bg: #1a212b;
  --pw-elev-1: 0 8px 24px color-mix(in srgb, #000 45%, transparent);
  --pw-elev-2: 0 16px 40px color-mix(in srgb, #000 55%, transparent);
  --pw-dock-clear: 5.5rem;
  color-scheme: dark;
}

.paywallet-shell {
  --rail: var(--pw-rail, var(--rail));
  --signal: var(--pw-signal, var(--signal));
  --ink: var(--pw-ink, var(--ink));
  --muted: var(--pw-muted, var(--muted));
  --panel: var(--pw-panel, var(--panel));
  --bg: var(--pw-bg, var(--bg));
  --danger: var(--pw-danger, var(--danger));
  --amber: var(--pw-amber, var(--amber));
}

:focus-visible {
  outline: 2px solid var(--pw-primary, #1b64da);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}