/*
 * 화면 테마 — 이전 사이트 web/src/lib/design/tokens.css 의 색·둥글기·그림자를 옮겼다(기본 · 다크 · 핑크).
 * 기본 테마는 늘 적용된다. 다크·핑크는 <html data-pes-theme="…"> 가 고른다(레이아웃의 머리 스크립트가 localStorage "pes-theme" 로 그리기 전에 정한다).
 * 선택자는 html:root(0,1,1) — Web Awesome 테마(:root · .wa-light, 0,1,0)보다 늘 앞선다.
 * Web Awesome 토큰을 이 팔레트로 덮으므로 컴포넌트(그림자 DOM 안까지)와 content.css 의 --pes-* 가 함께 따라온다.
 * 🛑 content.css 의 --pes-* 는 Web Awesome 토큰을 가리킨다 — 여기서 --pes-* 를 쓰면 서로를 가리켜 값이 사라진다.
 *    그래서 팔레트는 --theme-* 이름으로 두고, Web Awesome 토큰만 그것을 가리킨다.
 */

/* ── 기본(따뜻한 종이 · 보라) ─────────────────────────────────── */
html:root {
	--theme-font: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', 'Noto Sans Devanagari', 'Noto Sans Bengali', sans-serif;
	--theme-canvas: #f5f3f0;
	--theme-surface: #fffefd;
	--theme-subtle: #eeebe7;
	--theme-border: #ded9d3;
	--theme-ink: #292737;
	--theme-muted: #666171;
	--theme-accent: #6551a8;
	--theme-accent-hover: #52418d;
	--theme-accent-soft: #eee9f6;
	--theme-accent-ink: #52418d;
	--theme-on-accent: #fffefd;
	--theme-success: #256b56;
	--theme-success-soft: #e9f2eb;
	--theme-warning: #8b5b20;
	--theme-warning-soft: #faf0de;
	--theme-danger: #b53850;
	--theme-danger-soft: #fcebf0;
	--theme-shadow-card: 0 2px 3px #29273703, 0 8px 24px -18px #29273726;
	--theme-shadow-hover: 0 4px 8px -6px #29273714, 0 16px 32px -20px #29273736;
	--theme-shadow-overlay: 0 24px 72px -24px #17203d55;

	/* Web Awesome 공개 토큰 — 컴포넌트의 그림자 DOM 안까지 닿는다 */
	--wa-font-family-body: var(--theme-font);
	--wa-font-family-heading: var(--theme-font);
	--wa-font-family-longform: var(--theme-font);
	--wa-color-surface-default: var(--theme-canvas);
	--wa-color-surface-raised: var(--theme-surface);
	--wa-color-surface-lowered: var(--theme-subtle);
	--wa-color-surface-border: var(--theme-border);
	--wa-color-text-normal: var(--theme-ink);
	--wa-color-text-quiet: var(--theme-muted);
	--wa-color-text-link: var(--theme-accent-ink);
	--wa-color-brand-fill-loud: var(--theme-accent);
	--wa-color-brand-fill-normal: var(--theme-accent-soft);
	--wa-color-brand-fill-quiet: var(--theme-accent-soft);
	--wa-color-brand-on-loud: var(--theme-on-accent);
	--wa-color-brand-on-normal: var(--theme-accent-ink);
	--wa-color-brand-on-quiet: var(--theme-accent-ink);
	--wa-color-brand-border-normal: color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border));
	--wa-color-brand-border-quiet: var(--theme-border);
	--wa-color-brand-border-loud: var(--theme-accent);
	--wa-color-neutral-fill-loud: var(--theme-ink);
	--wa-color-neutral-on-loud: var(--theme-surface);
	--wa-color-neutral-fill-quiet: var(--theme-subtle);
	--wa-color-neutral-on-quiet: var(--theme-muted);
	--wa-color-success-fill-loud: var(--theme-success);
	--wa-color-success-on-loud: var(--theme-surface);
	--wa-color-success-fill-quiet: var(--theme-success-soft);
	--wa-color-success-on-quiet: var(--theme-success);
	--wa-color-warning-fill-quiet: var(--theme-warning-soft);
	--wa-color-warning-on-quiet: var(--theme-warning);
	--wa-color-warning-fill-loud: var(--theme-warning);
	--wa-color-warning-on-loud: var(--theme-surface);
	--wa-color-danger-fill-quiet: var(--theme-danger-soft);
	--wa-color-danger-on-quiet: var(--theme-danger);
	--wa-color-danger-fill-loud: var(--theme-danger);
	--wa-color-danger-on-loud: var(--theme-surface);
	--wa-color-focus: var(--theme-accent);
	--wa-border-radius-s: 0.5rem;
	--wa-border-radius-m: 0.65rem;
	--wa-border-radius-l: 1rem;
	--wa-border-radius-xl: 1.5rem;
	--wa-shadow-s: var(--theme-shadow-card);
	--wa-shadow-m: var(--theme-shadow-hover);
	--wa-shadow-l: var(--theme-shadow-overlay);
	--wa-form-control-background-color: var(--theme-surface);
	--wa-form-control-border-color: var(--theme-border);
	--wa-form-control-border-radius: var(--wa-border-radius-m);
	--wa-form-control-label-color: var(--theme-ink);
	--wa-form-control-value-color: var(--theme-ink);
	--wa-form-control-placeholder-color: var(--theme-muted);
	--wa-transition-fast: 160ms;
	--wa-transition-normal: 200ms;
	color-scheme: light;
}

/* ── 다크 ────────────────────────────────────── */
html:root[data-pes-theme='dark'] {
	--theme-canvas: #18171e;
	--theme-surface: #22212a;
	--theme-subtle: #2c2a35;
	--theme-border: #403c4c;
	--theme-ink: #f1eef7;
	--theme-muted: #b9b2c9;
	--theme-accent: #b4a5ff;
	--theme-accent-hover: #c7bcff;
	--theme-accent-soft: #352e47;
	--theme-accent-ink: #c7bcff;
	--theme-on-accent: #231c40;
	--theme-success: #7ddabb;
	--theme-success-soft: #1e3934;
	--theme-warning: #edc37f;
	--theme-warning-soft: #3c3224;
	--theme-danger: #f5a1af;
	--theme-danger-soft: #412b38;
	--theme-shadow-card: 0 3px 15px -9px #00000060;
	--theme-shadow-hover: 0 12px 26px -16px #00000090;
	color-scheme: dark;
}

/* ── 핑크 ────────────────────────────────────── */
html:root[data-pes-theme='pink'] {
	--theme-canvas: #fcf7fa;
	--theme-surface: #fffcfe;
	--theme-subtle: #f6edf2;
	--theme-border: #e8dce4;
	--theme-ink: #3e2b3c;
	--theme-muted: #7b6275;
	--theme-accent: #aa4075;
	--theme-accent-hover: #943366;
	--theme-accent-soft: #f8e6ef;
	--theme-accent-ink: #943366;
}

html:root:lang(ur) {
	--theme-font: 'Noto Nastaliq Urdu', 'Segoe UI', sans-serif;
}