/* AUTO-GENERATED by @wds/build-tokens — 직접 수정 금지.
 * 입력: tokens/{core,semantic,component}/*.json (W3C Design Tokens)
 * 갱신: make tokens
 * 계층: Primitive(core) → Semantic(light/dark) → Component (AD-2)
 * 카스케이드: 전체를 @layer wds.tokens로 감쌈 (ADR-016 / R1-3) — 소비처 unlayered가 항상 이김.
 */

@layer wds.tokens, wds.base, wds.components;

@layer wds.tokens {
:root {
  color-scheme: light;
  /* ═══ 1) PRIMITIVE — core ═══ */
  /* ── brand ── */
  --wds-brand-blue: #155eef;
  --wds-brand-cyan: #36bffa;
  --wds-brand-cyan-light: #4fc8ff;
  /* ── bp ── */
  --wds-bp-mobile: 320px;
  --wds-bp-narrow: 380px;
  --wds-bp-tablet: 768px;
  --wds-bp-desktop: 1024px;
  --wds-bp-wide: 1280px;
  --wds-bp-max: 1920px;
  --wds-bp-compact: 600px;
  --wds-bp-expanded: 840px;
  /* ── blue ── */
  --wds-blue-50: #eaf3fe;
  --wds-blue-100: #d6e6fd;
  --wds-blue-400: #66aaff;
  --wds-blue-500: #3c8ffd;
  --wds-blue-600: #1a75eb;
  --wds-blue-700: #1252b2;
  --wds-blue-800: #0d285e;
  --wds-blue-900: #0b1d3a;
  /* ── gray ── */
  --wds-gray-50: #f9fafb;
  --wds-gray-100: #f3f4f6;
  --wds-gray-200: #e5e7eb;
  --wds-gray-300: #d1d5db;
  --wds-gray-400: #9ca3af;
  --wds-gray-500: #6b7280;
  --wds-gray-600: #4b5563;
  --wds-gray-700: #374151;
  --wds-gray-800: #1f2937;
  --wds-gray-900: #111827;
  /* ── white ── */
  --wds-white: #ffffff;
  /* ── black ── */
  --wds-black: #000000;
  /* ── green ── */
  --wds-green-400: #4ade80;
  --wds-green-600: #16a34a;
  --wds-green-700: #15803d;
  /* ── amber ── */
  --wds-amber-400: #fbbf24;
  --wds-amber-500: #f59e0b;
  --wds-amber-700: #b45309;
  /* ── red ── */
  --wds-red-400: #f87171;
  --wds-red-500: #ef4444;
  --wds-red-700: #b91c1c;
  /* ── sky ── */
  --wds-sky-400: #38bdf8;
  --wds-sky-500: #3b82f6;
  --wds-sky-700: #1d4ed8;
  /* ── violet ── */
  --wds-violet-50: #f2eefe;
  --wds-violet-100: #e3dafd;
  --wds-violet-500: #7c5cfc;
  --wds-violet-600: #6938ef;
  --wds-violet-700: #5b21b6;
  --wds-violet-900: #2e1065;
  /* ── teal ── */
  --wds-teal-50: #e6fbf8;
  --wds-teal-100: #c2f3ec;
  --wds-teal-500: #0ea5a4;
  --wds-teal-600: #0d8e8c;
  --wds-teal-700: #0f766e;
  --wds-teal-900: #042f2e;
  /* ── magenta ── */
  --wds-magenta-50: #fdecf5;
  --wds-magenta-100: #fbd0e6;
  --wds-magenta-500: #e0489e;
  --wds-magenta-600: #c42c82;
  --wds-magenta-700: #9d174d;
  --wds-magenta-900: #500724;
  /* ── orange ── */
  --wds-orange-50: #fff1e6;
  --wds-orange-100: #ffe0c2;
  --wds-orange-500: #f97316;
  --wds-orange-600: #e25e07;
  --wds-orange-700: #c2410c;
  --wds-orange-900: #431407;
  /* ── cyan ── */
  --wds-cyan-50: #e7fafe;
  --wds-cyan-100: #c4f1fb;
  --wds-cyan-500: #06b6d4;
  --wds-cyan-600: #0a9dba;
  --wds-cyan-700: #0e7490;
  --wds-cyan-900: #083344;
  /* ── chart ── */
  --wds-chart-1: #1a75eb;
  --wds-chart-2: #7c5cfc;
  --wds-chart-3: #0f766e;
  --wds-chart-4: #c2410c;
  --wds-chart-5: #e0489e;
  --wds-chart-6: #16a34a;
  --wds-chart-7: #0a9dba;
  --wds-chart-8: #bf7a06;
  /* ── gradient ── */
  --wds-gradient-brand: linear-gradient(120deg, #1a75eb, #7c5cfc);
  --wds-gradient-accent: linear-gradient(120deg, #0ea5a4, #06b6d4);
  --wds-gradient-vivid: linear-gradient(120deg, #7c5cfc, #e0489e);
  --wds-gradient-surface: linear-gradient(180deg, #ffffff, #f3f4f6);
  /* ── container ── */
  --wds-container-max: 1200px;
  --wds-container-prose: 760px;
  --wds-container-content: 1040px;
  /* ── grid ── */
  --wds-grid-gutter: 24px;
  --wds-grid-gutter-min: 16px;
  --wds-grid-gutter-max: 32px;
  --wds-grid-columns: 12;
  --wds-grid-margin: 24px;
  --wds-grid-compact-columns: 4;
  --wds-grid-compact-gutter: 16px;
  --wds-grid-compact-margin: 16px;
  --wds-grid-medium-columns: 8;
  /* ── split ── */
  --wds-split-left: 52%;
  --wds-split-right: 48%;
  /* ── duration ── */
  --wds-duration-fast: 150ms;
  --wds-duration-normal: 250ms;
  --wds-duration-slow: 400ms;
  /* ── ambient ── */
  --wds-ambient-breath: 1600ms;
  /* ── ease ── */
  --wds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --wds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wds-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --wds-ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --wds-ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  /* ── radius ── */
  --wds-radius-sm: 6px;
  --wds-radius-md: 10px;
  --wds-radius-lg: 14px;
  --wds-radius-xl: 20px;
  --wds-radius-xxl: 28px;
  --wds-radius-full: 9999px;
  /* ── shadow ── */
  --wds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --wds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --wds-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1);
  --wds-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.16);
  /* ── space ── */
  --wds-space-1: 0.25rem;
  --wds-space-2: 0.5rem;
  --wds-space-3: 0.75rem;
  --wds-space-4: 1rem;
  --wds-space-5: 1.25rem;
  --wds-space-6: 1.5rem;
  --wds-space-8: 2rem;
  --wds-space-10: 2.5rem;
  --wds-space-12: 3rem;
  --wds-space-16: 4rem;
  --wds-space-20: 5rem;
  --wds-space-24: 6rem;
  --wds-space-32: 8rem;
  /* ── font ── */
  --wds-font-sans: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --wds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wds-font-size-display-1: 3rem;
  --wds-font-size-h1: 2rem;
  --wds-font-size-h2: 1.5rem;
  --wds-font-size-h3: 1.125rem;
  --wds-font-size-body-1: 1rem;
  --wds-font-size-body-2: 0.875rem;
  --wds-font-size-caption: 0.75rem;
  --wds-font-size-display-m: 2.5rem;
  --wds-font-size-display-s: 2.25rem;
  --wds-font-size-headline-m: 1.75rem;
  --wds-font-size-title-l: 1.25rem;
  --wds-font-size-body-s: 0.8125rem;
  --wds-font-size-label-s: 0.6875rem;
  --wds-font-weight-bold: 700;
  --wds-font-weight-semibold: 600;
  --wds-font-weight-medium: 500;
  --wds-font-weight-regular: 400;
  --wds-font-weight-light: 300;
  /* ── line-height ── */
  --wds-line-height-tight: 1.3;
  --wds-line-height-normal: 1.6;
  --wds-line-height-snug: 1.2;
  --wds-line-height-label: 1.4;
  /* ── letter-spacing ── */
  --wds-letter-spacing-h1: -0.02em;
  --wds-letter-spacing-h2: -0.01em;
  --wds-letter-spacing-h3: -0.01em;
  --wds-letter-spacing-normal: 0em;
  --wds-letter-spacing-label: 0.01em;
  /* ── z ── */
  --wds-z-dropdown: 1000;
  --wds-z-sticky: 1100;
  --wds-z-overlay: 1200;
  --wds-z-modal: 1300;
  --wds-z-toast: 1400;
  --wds-z-tooltip: 1500;
  --wds-z-skip-link: 1600;
  /* ── neutral-tonal ── */
  --wds-neutral-tonal-t0: #000000;
  --wds-neutral-tonal-t4: #0b0e17;
  --wds-neutral-tonal-t6: #0f131e;
  --wds-neutral-tonal-t10: #141c2a;
  --wds-neutral-tonal-t12: #17202e;
  --wds-neutral-tonal-t17: #212b39;
  --wds-neutral-tonal-t20: #273140;
  --wds-neutral-tonal-t22: #2b3544;
  --wds-neutral-tonal-t24: #303a49;
  --wds-neutral-tonal-t30: #3d4757;
  --wds-neutral-tonal-t40: #565f6d;
  --wds-neutral-tonal-t50: #707785;
  --wds-neutral-tonal-t60: #8a919e;
  --wds-neutral-tonal-t70: #a5acb7;
  --wds-neutral-tonal-t80: #c2c7ce;
  --wds-neutral-tonal-t87: #d7dae0;
  --wds-neutral-tonal-t90: #e0e3e7;
  --wds-neutral-tonal-t92: #e6e8ec;
  --wds-neutral-tonal-t94: #eceef1;
  --wds-neutral-tonal-t95: #eff1f3;
  --wds-neutral-tonal-t96: #f2f4f6;
  --wds-neutral-tonal-t98: #f8f9fa;
  --wds-neutral-tonal-t99: #fcfcfd;
  --wds-neutral-tonal-t100: #ffffff;
  /* ── blue-tonal ── */
  --wds-blue-tonal-t0: #000000;
  --wds-blue-tonal-t10: #0c1b35;
  --wds-blue-tonal-t20: #0e2d68;
  --wds-blue-tonal-t30: #124394;
  --wds-blue-tonal-t40: #155abf;
  --wds-blue-tonal-t50: #1973e9;
  --wds-blue-tonal-t60: #3e90fd;
  --wds-blue-tonal-t70: #6faeff;
  --wds-blue-tonal-t80: #a3c9fe;
  --wds-blue-tonal-t90: #d2e4fd;
  --wds-blue-tonal-t95: #e8f2fe;
  --wds-blue-tonal-t99: #fafcff;
  --wds-blue-tonal-t100: #ffffff;
  /* ── green-tonal ── */
  --wds-green-tonal-t0: #000000;
  --wds-green-tonal-t10: #111f13;
  --wds-green-tonal-t20: #16371e;
  --wds-green-tonal-t30: #195129;
  --wds-green-tonal-t40: #186c35;
  --wds-green-tonal-t50: #158940;
  --wds-green-tonal-t60: #1aa64d;
  --wds-green-tonal-t70: #35c367;
  --wds-green-tonal-t80: #55e085;
  --wds-green-tonal-t90: #b3f1c1;
  --wds-green-tonal-t95: #daf8e0;
  --wds-green-tonal-t99: #f8fef9;
  --wds-green-tonal-t100: #ffffff;
  /* ── red-tonal ── */
  --wds-red-tonal-t0: #000000;
  --wds-red-tonal-t10: #31120c;
  --wds-red-tonal-t20: #5b1913;
  --wds-red-tonal-t30: #891d18;
  --wds-red-tonal-t40: #b91c1c;
  --wds-red-tonal-t50: #dd3836;
  --wds-red-tonal-t60: #f55e5d;
  --wds-red-tonal-t70: #fd8a87;
  --wds-red-tonal-t80: #ffb3af;
  --wds-red-tonal-t90: #ffdad7;
  --wds-red-tonal-t95: #ffedeb;
  --wds-red-tonal-t99: #fffbfb;
  --wds-red-tonal-t100: #ffffff;
  /* ── amber-tonal ── */
  --wds-amber-tonal-t0: #000000;
  --wds-amber-tonal-t10: #2a1709;
  --wds-amber-tonal-t20: #4c270e;
  --wds-amber-tonal-t30: #71370f;
  --wds-amber-tonal-t40: #98470d;
  --wds-amber-tonal-t50: #bd5c09;
  --wds-amber-tonal-t60: #d7790a;
  --wds-amber-tonal-t70: #f0970b;
  --wds-amber-tonal-t80: #fbbc22;
  --wds-amber-tonal-t90: #ffdea6;
  --wds-amber-tonal-t95: #ffefd6;
  --wds-amber-tonal-t99: #fffcf7;
  --wds-amber-tonal-t100: #ffffff;
  /* ── sky-tonal ── */
  --wds-sky-tonal-t0: #000000;
  --wds-sky-tonal-t10: #181835;
  --wds-sky-tonal-t20: #212a69;
  --wds-sky-tonal-t30: #233ca2;
  --wds-sky-tonal-t40: #1d51da;
  --wds-sky-tonal-t50: #2d71ed;
  --wds-sky-tonal-t60: #1094fb;
  --wds-sky-tonal-t70: #23b6fa;
  --wds-sky-tonal-t80: #86cffa;
  --wds-sky-tonal-t90: #c7e7fd;
  --wds-sky-tonal-t95: #e4f3fe;
  --wds-sky-tonal-t99: #fafdff;
  --wds-sky-tonal-t100: #ffffff;
  /* ── secondary-tonal ── */
  --wds-secondary-tonal-t0: #000000;
  --wds-secondary-tonal-t10: #001e2c;
  --wds-secondary-tonal-t20: #00344a;
  --wds-secondary-tonal-t30: #004c6a;
  --wds-secondary-tonal-t40: #00658b;
  --wds-secondary-tonal-t50: #0080ad;
  --wds-secondary-tonal-t60: #009bd0;
  --wds-secondary-tonal-t70: #09b8f5;
  --wds-secondary-tonal-t80: #7dd0fe;
  --wds-secondary-tonal-t90: #c3e8ff;
  --wds-secondary-tonal-t95: #e2f3ff;
  --wds-secondary-tonal-t99: #f9fdff;
  --wds-secondary-tonal-t100: #ffffff;
  /* ── tertiary-tonal ── */
  --wds-tertiary-tonal-t0: #000000;
  --wds-tertiary-tonal-t10: #330e23;
  --wds-tertiary-tonal-t20: #62023f;
  --wds-tertiary-tonal-t30: #890958;
  --wds-tertiary-tonal-t40: #ae2071;
  --wds-tertiary-tonal-t50: #ce3d8c;
  --wds-tertiary-tonal-t60: #e563a4;
  --wds-tertiary-tonal-t70: #f489bd;
  --wds-tertiary-tonal-t80: #fab1d3;
  --wds-tertiary-tonal-t90: #ffd8ea;
  --wds-tertiary-tonal-t95: #ffecf4;
  --wds-tertiary-tonal-t99: #fffbfd;
  --wds-tertiary-tonal-t100: #ffffff;
  /* ── spring — 5-3 모션 Personality (linear() + duration) ── */
  /* 공간 spring 기본 — 위치/크기/레이아웃 전환. 약한 오버슈트로 생동감(M3 expressive spatial default 기반: ζ0.8·k380) */
  --wds-spring-spatial-default: linear(0, 0.0241 3.2258%, 0.0851 6.4516%, 0.1686 9.6774%, 0.2638 12.9032%, 0.3627 16.129%, 0.4597 19.3548%, 0.551 22.5806%, 0.6341 25.8065%, 0.708 29.0323%, 0.772 32.2581%, 0.8264 35.4839%, 0.8717 38.7097%, 0.9087 41.9355%, 0.9383 45.1613%, 0.9615 48.3871%, 0.9792 51.6129%, 0.9923 54.8387%, 1.0016 58.0645%, 1.008 61.2903%, 1.012 64.5161%, 1.0142 67.7419%, 1.0151 70.9677%, 1.015 74.1935%, 1.0143 77.4194%, 1.0131 80.6452%, 1.0117 83.871%, 1.0102 87.0968%, 1.0087 90.3226%, 1.0073 93.5484%, 1.006 96.7742%, 1);
  --wds-spring-spatial-default-duration: 372ms;
  /* 공간 spring 빠름 — 작은 요소·즉각 반응. 같은 ζ0.8로 절제된 오버슈트 유지(M3 expressive spatial fast 강성 기반: k800) */
  --wds-spring-spatial-fast: linear(0, 0.0241 3.2258%, 0.0849 6.4516%, 0.1682 9.6774%, 0.2632 12.9032%, 0.362 16.129%, 0.4589 19.3548%, 0.5501 22.5806%, 0.6332 25.8065%, 0.707 29.0323%, 0.7711 32.2581%, 0.8256 35.4839%, 0.871 38.7097%, 0.9081 41.9355%, 0.9378 45.1613%, 0.961 48.3871%, 0.9788 51.6129%, 0.992 54.8387%, 1.0014 58.0645%, 1.0078 61.2903%, 1.0119 64.5161%, 1.0142 67.7419%, 1.0151 70.9677%, 1.015 74.1935%, 1.0143 77.4194%, 1.0132 80.6452%, 1.0118 83.871%, 1.0103 87.0968%, 1.0088 90.3226%, 1.0074 93.5484%, 1.0061 96.7742%, 1);
  --wds-spring-spatial-fast-duration: 256ms;
  /* 공간 spring 느림 — 큰 표면·강조 등장. 더 길게 안착(M3 expressive spatial slow 기반: ζ0.8·k200) */
  --wds-spring-spatial-slow: linear(0, 0.0241 3.2258%, 0.0849 6.4516%, 0.1682 9.6774%, 0.2632 12.9032%, 0.362 16.129%, 0.4589 19.3548%, 0.5501 22.5806%, 0.6332 25.8065%, 0.707 29.0323%, 0.7711 32.2581%, 0.8256 35.4839%, 0.871 38.7097%, 0.9081 41.9355%, 0.9378 45.1613%, 0.961 48.3871%, 0.9788 51.6129%, 0.992 54.8387%, 1.0014 58.0645%, 1.0078 61.2903%, 1.0119 64.5161%, 1.0142 67.7419%, 1.0151 70.9677%, 1.015 74.1935%, 1.0143 77.4194%, 1.0132 80.6452%, 1.0118 83.871%, 1.0103 87.0968%, 1.0088 90.3226%, 1.0074 93.5484%, 1.0061 96.7742%, 1);
  --wds-spring-spatial-slow-duration: 512ms;
  /* 효과 spring 기본 — 색/불투명도/blur 전환. 임계감쇠(ζ1.0)로 오버슈트 없이 빠른 안착(M3 effect default 강성 티어 기반: k1600) */
  --wds-spring-effect-default: linear(0, 0.0251 3.2258%, 0.0857 6.4516%, 0.1655 9.6774%, 0.2533 12.9032%, 0.342 16.129%, 0.4272 19.3548%, 0.5062 22.5806%, 0.5777 25.8065%, 0.6413 29.0323%, 0.6971 32.2581%, 0.7455 35.4839%, 0.7872 38.7097%, 0.8226 41.9355%, 0.8527 45.1613%, 0.8781 48.3871%, 0.8993 51.6129%, 0.9171 54.8387%, 0.9319 58.0645%, 0.9441 61.2903%, 0.9543 64.5161%, 0.9626 67.7419%, 0.9695 70.9677%, 0.9752 74.1935%, 0.9798 77.4194%, 0.9836 80.6452%, 0.9867 83.871%, 0.9892 87.0968%, 0.9913 90.3226%, 0.9929 93.5484%, 0.9943 96.7742%, 1);
  --wds-spring-effect-default-duration: 188ms;
  /* 효과 spring 빠름 — 즉각 피드백의 색/불투명도. 임계감쇠(ζ1.0)·고강성으로 가장 빠른 안착(M3 effect fast 강성 티어 기반: k3800) */
  --wds-spring-effect-fast: linear(0, 0.0258 3.2258%, 0.0881 6.4516%, 0.1697 9.6774%, 0.2592 12.9032%, 0.3492 16.129%, 0.4353 19.3548%, 0.5148 22.5806%, 0.5865 25.8065%, 0.6501 29.0323%, 0.7056 32.2581%, 0.7536 35.4839%, 0.7946 38.7097%, 0.8295 41.9355%, 0.859 45.1613%, 0.8837 48.3871%, 0.9043 51.6129%, 0.9215 54.8387%, 0.9357 58.0645%, 0.9475 61.2903%, 0.9572 64.5161%, 0.9652 67.7419%, 0.9717 70.9677%, 0.977 74.1935%, 0.9814 77.4194%, 0.9849 80.6452%, 0.9878 83.871%, 0.9902 87.0968%, 0.9921 90.3226%, 0.9936 93.5484%, 0.9949 96.7742%, 1);
  --wds-spring-effect-fast-duration: 124ms;
  /* ═══ 2) SEMANTIC — light (정본) ═══ */
  /* ── color ── */
  --wds-color-primary: var(--wds-blue-600);
  --wds-color-primary-hover: var(--wds-blue-700);
  --wds-color-primary-active: var(--wds-blue-800);
  --wds-color-primary-subtle: var(--wds-blue-50);
  --wds-color-primary-strong: var(--wds-blue-700);
  --wds-color-primary-strong-hover: var(--wds-blue-800);
  --wds-color-primary-strong-active: var(--wds-blue-900);
  --wds-color-primary-text: var(--wds-blue-700);
  --wds-color-on-primary: var(--wds-white);
  --wds-color-ink: var(--wds-gray-900);
  --wds-color-ink-hover: var(--wds-gray-800);
  --wds-color-ink-active: var(--wds-black);
  --wds-color-on-ink: var(--wds-white);
  --wds-color-bg: var(--wds-gray-50);
  --wds-color-surface: var(--wds-white);
  --wds-color-surface-muted: var(--wds-gray-100);
  --wds-color-surface-selected: var(--wds-blue-50);
  --wds-color-surface-raised: var(--wds-white);
  --wds-color-text: var(--wds-gray-900);
  --wds-color-text-muted: var(--wds-gray-600);
  --wds-color-text-subtle: var(--wds-gray-500);
  --wds-color-text-placeholder: var(--wds-gray-500);
  --wds-color-text-on-primary: var(--wds-white);
  --wds-color-border: var(--wds-gray-200);
  --wds-color-border-subtle: var(--wds-gray-100);
  --wds-color-border-strong: var(--wds-gray-300);
  --wds-color-focus-ring: var(--wds-blue-600);
  --wds-color-link: var(--wds-blue-700);
  --wds-color-link-hover: var(--wds-blue-800);
  --wds-color-success: var(--wds-green-600);
  --wds-color-warning: var(--wds-amber-500);
  --wds-color-error: var(--wds-red-500);
  --wds-color-info: var(--wds-sky-500);
  --wds-color-success-text: var(--wds-green-700);
  --wds-color-warning-text: var(--wds-amber-700);
  --wds-color-error-text: var(--wds-red-700);
  --wds-color-info-text: var(--wds-sky-700);
  --wds-color-disabled-bg: var(--wds-gray-200);
  --wds-color-disabled-fg: var(--wds-gray-400);
  --wds-color-overlay: rgb(0 0 0 / 40%);
  --wds-color-highlight-bg: var(--wds-blue-100);
  --wds-color-secondary: var(--wds-secondary-tonal-t40);
  --wds-color-on-secondary: var(--wds-secondary-tonal-t100);
  --wds-color-secondary-container: var(--wds-secondary-tonal-t90);
  --wds-color-on-secondary-container: var(--wds-secondary-tonal-t10);
  --wds-color-tertiary: var(--wds-tertiary-tonal-t40);
  --wds-color-on-tertiary: var(--wds-tertiary-tonal-t100);
  --wds-color-tertiary-container: var(--wds-tertiary-tonal-t90);
  --wds-color-on-tertiary-container: var(--wds-tertiary-tonal-t10);
  --wds-color-primary-container: var(--wds-blue-100);
  --wds-color-on-primary-container: var(--wds-blue-900);
  --wds-color-surface-container-lowest: var(--wds-neutral-tonal-t100);
  --wds-color-surface-container-low: var(--wds-neutral-tonal-t96);
  --wds-color-surface-container: var(--wds-neutral-tonal-t94);
  --wds-color-surface-container-high: var(--wds-neutral-tonal-t92);
  --wds-color-surface-container-highest: var(--wds-neutral-tonal-t90);
  --wds-color-outline: var(--wds-neutral-tonal-t50);
  --wds-color-outline-variant: var(--wds-neutral-tonal-t80);
  --wds-color-inverse-surface: var(--wds-neutral-tonal-t20);
  --wds-color-inverse-on-surface: var(--wds-neutral-tonal-t95);
  --wds-color-inverse-primary: var(--wds-blue-tonal-t80);
  --wds-color-error-container: var(--wds-red-tonal-t90);
  --wds-color-on-error-container: var(--wds-red-tonal-t10);
  --wds-color-tag-violet-bg: var(--wds-violet-50);
  --wds-color-tag-violet-text: var(--wds-violet-700);
  --wds-color-tag-violet-solid: var(--wds-violet-500);
  --wds-color-tag-teal-bg: var(--wds-teal-50);
  --wds-color-tag-teal-text: var(--wds-teal-700);
  --wds-color-tag-teal-solid: var(--wds-teal-500);
  --wds-color-tag-magenta-bg: var(--wds-magenta-50);
  --wds-color-tag-magenta-text: var(--wds-magenta-700);
  --wds-color-tag-magenta-solid: var(--wds-magenta-500);
  --wds-color-tag-orange-bg: var(--wds-orange-50);
  --wds-color-tag-orange-text: var(--wds-orange-700);
  --wds-color-tag-orange-solid: var(--wds-orange-500);
  --wds-color-tag-cyan-bg: var(--wds-cyan-50);
  --wds-color-tag-cyan-text: var(--wds-cyan-700);
  --wds-color-tag-cyan-solid: var(--wds-cyan-500);
  --wds-color-success-container: var(--wds-green-tonal-t90);
  --wds-color-on-success-container: var(--wds-green-tonal-t10);
  --wds-color-warning-container: var(--wds-amber-tonal-t90);
  --wds-color-on-warning-container: var(--wds-amber-tonal-t10);
  --wds-color-info-container: var(--wds-sky-tonal-t90);
  --wds-color-on-info-container: var(--wds-sky-tonal-t10);
  /* ── radius ── */
  --wds-radius-control: var(--wds-radius-md);
  --wds-radius-control-sm: var(--wds-radius-sm);
  /* ── control ── */
  --wds-control-height-sm: 2rem;
  --wds-control-height-md: 2.75rem;
  --wds-control-height-lg: 3.25rem;
  /* ── icon ── */
  --wds-icon-size-sm: 1rem;
  --wds-icon-size-md: 1.25rem;
  --wds-icon-size-lg: 1.5rem;
  --wds-icon-stroke: 1.8px;
  /* ── color ── */
  --wds-color-surface-hover: #ecedee;
  --wds-color-surface-pressed: #e2e3e5;
  /* ═══ 3) COMPONENT ═══ */
  /* ── alert ── */
  --wds-alert-surface: var(--wds-color-surface);
  --wds-alert-border: var(--wds-color-border);
  /* ── badge ── */
  --wds-badge-neutral-bg: var(--wds-color-surface-muted);
  --wds-badge-neutral-fg: var(--wds-color-text-muted);
  --wds-badge-primary-bg: var(--wds-color-primary-subtle);
  --wds-badge-primary-fg: var(--wds-color-primary-text);
  /* ── button ── */
  --wds-button-bg: var(--wds-color-primary-strong);
  --wds-button-bg-hover: var(--wds-color-primary-strong-hover);
  --wds-button-bg-active: var(--wds-color-primary-strong-active);
  --wds-button-bg-disabled: var(--wds-color-disabled-bg);
  --wds-button-fg: var(--wds-color-on-primary);
  --wds-button-fg-disabled: var(--wds-color-disabled-fg);
  --wds-button-radius: var(--wds-radius-control);
  --wds-button-height-sm: var(--wds-control-height-sm);
  --wds-button-height-md: var(--wds-control-height-md);
  --wds-button-height-lg: var(--wds-control-height-lg);
  /* ── card ── */
  --wds-card-surface: var(--wds-color-surface);
  --wds-card-surface-filled: var(--wds-color-surface-container);
  --wds-card-border: var(--wds-color-border);
  /* ── checkbox ── */
  --wds-checkbox-border: var(--wds-color-border-strong);
  --wds-checkbox-bg: var(--wds-color-surface);
  --wds-checkbox-bg-checked: var(--wds-color-primary);
  --wds-checkbox-check: var(--wds-color-on-primary);
  --wds-checkbox-radius: var(--wds-radius-control-sm);
  /* ── input ── */
  --wds-input-bg: var(--wds-color-surface);
  --wds-input-bg-disabled: var(--wds-color-surface-muted);
  --wds-input-border: var(--wds-color-border-strong);
  --wds-input-border-focus: var(--wds-color-primary);
  --wds-input-fg: var(--wds-color-text);
  --wds-input-placeholder: var(--wds-color-text-placeholder);
  --wds-input-border-invalid: var(--wds-color-error);
  --wds-input-radius: var(--wds-radius-control);
  --wds-input-height: var(--wds-control-height-md);
  /* ── modal ── */
  --wds-modal-scrim: var(--wds-color-overlay);
  --wds-modal-surface: var(--wds-color-surface-raised);
  /* ── toast ── */
  --wds-toast-surface: var(--wds-color-surface-raised);
  --wds-toast-border: var(--wds-color-border);
}

/* 강제 라이트 스코프 — 다크 문서 내 중첩 재테마(데모 패널 등)용 */
[data-theme='light'] {
  /* ═══ SEMANTIC — light ═══ */
  /* ── color ── */
  --wds-color-primary: var(--wds-blue-600);
  --wds-color-primary-hover: var(--wds-blue-700);
  --wds-color-primary-active: var(--wds-blue-800);
  --wds-color-primary-subtle: var(--wds-blue-50);
  --wds-color-primary-strong: var(--wds-blue-700);
  --wds-color-primary-strong-hover: var(--wds-blue-800);
  --wds-color-primary-strong-active: var(--wds-blue-900);
  --wds-color-primary-text: var(--wds-blue-700);
  --wds-color-on-primary: var(--wds-white);
  --wds-color-ink: var(--wds-gray-900);
  --wds-color-ink-hover: var(--wds-gray-800);
  --wds-color-ink-active: var(--wds-black);
  --wds-color-on-ink: var(--wds-white);
  --wds-color-bg: var(--wds-gray-50);
  --wds-color-surface: var(--wds-white);
  --wds-color-surface-muted: var(--wds-gray-100);
  --wds-color-surface-selected: var(--wds-blue-50);
  --wds-color-surface-raised: var(--wds-white);
  --wds-color-text: var(--wds-gray-900);
  --wds-color-text-muted: var(--wds-gray-600);
  --wds-color-text-subtle: var(--wds-gray-500);
  --wds-color-text-placeholder: var(--wds-gray-500);
  --wds-color-text-on-primary: var(--wds-white);
  --wds-color-border: var(--wds-gray-200);
  --wds-color-border-subtle: var(--wds-gray-100);
  --wds-color-border-strong: var(--wds-gray-300);
  --wds-color-focus-ring: var(--wds-blue-600);
  --wds-color-link: var(--wds-blue-700);
  --wds-color-link-hover: var(--wds-blue-800);
  --wds-color-success: var(--wds-green-600);
  --wds-color-warning: var(--wds-amber-500);
  --wds-color-error: var(--wds-red-500);
  --wds-color-info: var(--wds-sky-500);
  --wds-color-success-text: var(--wds-green-700);
  --wds-color-warning-text: var(--wds-amber-700);
  --wds-color-error-text: var(--wds-red-700);
  --wds-color-info-text: var(--wds-sky-700);
  --wds-color-disabled-bg: var(--wds-gray-200);
  --wds-color-disabled-fg: var(--wds-gray-400);
  --wds-color-overlay: rgb(0 0 0 / 40%);
  --wds-color-highlight-bg: var(--wds-blue-100);
  --wds-color-secondary: var(--wds-secondary-tonal-t40);
  --wds-color-on-secondary: var(--wds-secondary-tonal-t100);
  --wds-color-secondary-container: var(--wds-secondary-tonal-t90);
  --wds-color-on-secondary-container: var(--wds-secondary-tonal-t10);
  --wds-color-tertiary: var(--wds-tertiary-tonal-t40);
  --wds-color-on-tertiary: var(--wds-tertiary-tonal-t100);
  --wds-color-tertiary-container: var(--wds-tertiary-tonal-t90);
  --wds-color-on-tertiary-container: var(--wds-tertiary-tonal-t10);
  --wds-color-primary-container: var(--wds-blue-100);
  --wds-color-on-primary-container: var(--wds-blue-900);
  --wds-color-surface-container-lowest: var(--wds-neutral-tonal-t100);
  --wds-color-surface-container-low: var(--wds-neutral-tonal-t96);
  --wds-color-surface-container: var(--wds-neutral-tonal-t94);
  --wds-color-surface-container-high: var(--wds-neutral-tonal-t92);
  --wds-color-surface-container-highest: var(--wds-neutral-tonal-t90);
  --wds-color-outline: var(--wds-neutral-tonal-t50);
  --wds-color-outline-variant: var(--wds-neutral-tonal-t80);
  --wds-color-inverse-surface: var(--wds-neutral-tonal-t20);
  --wds-color-inverse-on-surface: var(--wds-neutral-tonal-t95);
  --wds-color-inverse-primary: var(--wds-blue-tonal-t80);
  --wds-color-error-container: var(--wds-red-tonal-t90);
  --wds-color-on-error-container: var(--wds-red-tonal-t10);
  --wds-color-tag-violet-bg: var(--wds-violet-50);
  --wds-color-tag-violet-text: var(--wds-violet-700);
  --wds-color-tag-violet-solid: var(--wds-violet-500);
  --wds-color-tag-teal-bg: var(--wds-teal-50);
  --wds-color-tag-teal-text: var(--wds-teal-700);
  --wds-color-tag-teal-solid: var(--wds-teal-500);
  --wds-color-tag-magenta-bg: var(--wds-magenta-50);
  --wds-color-tag-magenta-text: var(--wds-magenta-700);
  --wds-color-tag-magenta-solid: var(--wds-magenta-500);
  --wds-color-tag-orange-bg: var(--wds-orange-50);
  --wds-color-tag-orange-text: var(--wds-orange-700);
  --wds-color-tag-orange-solid: var(--wds-orange-500);
  --wds-color-tag-cyan-bg: var(--wds-cyan-50);
  --wds-color-tag-cyan-text: var(--wds-cyan-700);
  --wds-color-tag-cyan-solid: var(--wds-cyan-500);
  --wds-color-success-container: var(--wds-green-tonal-t90);
  --wds-color-on-success-container: var(--wds-green-tonal-t10);
  --wds-color-warning-container: var(--wds-amber-tonal-t90);
  --wds-color-on-warning-container: var(--wds-amber-tonal-t10);
  --wds-color-info-container: var(--wds-sky-tonal-t90);
  --wds-color-on-info-container: var(--wds-sky-tonal-t10);
  /* ── radius ── */
  --wds-radius-control: var(--wds-radius-md);
  --wds-radius-control-sm: var(--wds-radius-sm);
  /* ── control ── */
  --wds-control-height-sm: 2rem;
  --wds-control-height-md: 2.75rem;
  --wds-control-height-lg: 3.25rem;
  /* ── icon ── */
  --wds-icon-size-sm: 1rem;
  --wds-icon-size-md: 1.25rem;
  --wds-icon-size-lg: 1.5rem;
  --wds-icon-stroke: 1.8px;
  /* ── color ── */
  --wds-color-surface-hover: #ecedee;
  --wds-color-surface-pressed: #e2e3e5;
  /* ── chart 카테고리 (라이트 정본 복원) ── */
  --wds-chart-1: #1a75eb;
  --wds-chart-2: #7c5cfc;
  --wds-chart-3: #0f766e;
  --wds-chart-4: #c2410c;
  --wds-chart-5: #e0489e;
  --wds-chart-6: #16a34a;
  --wds-chart-7: #0a9dba;
  --wds-chart-8: #bf7a06;
  /* ═══ 3) COMPONENT ═══ */
  /* ── alert ── */
  --wds-alert-surface: var(--wds-color-surface);
  --wds-alert-border: var(--wds-color-border);
  /* ── badge ── */
  --wds-badge-neutral-bg: var(--wds-color-surface-muted);
  --wds-badge-neutral-fg: var(--wds-color-text-muted);
  --wds-badge-primary-bg: var(--wds-color-primary-subtle);
  --wds-badge-primary-fg: var(--wds-color-primary-text);
  /* ── button ── */
  --wds-button-bg: var(--wds-color-primary-strong);
  --wds-button-bg-hover: var(--wds-color-primary-strong-hover);
  --wds-button-bg-active: var(--wds-color-primary-strong-active);
  --wds-button-bg-disabled: var(--wds-color-disabled-bg);
  --wds-button-fg: var(--wds-color-on-primary);
  --wds-button-fg-disabled: var(--wds-color-disabled-fg);
  --wds-button-radius: var(--wds-radius-control);
  --wds-button-height-sm: var(--wds-control-height-sm);
  --wds-button-height-md: var(--wds-control-height-md);
  --wds-button-height-lg: var(--wds-control-height-lg);
  /* ── card ── */
  --wds-card-surface: var(--wds-color-surface);
  --wds-card-surface-filled: var(--wds-color-surface-container);
  --wds-card-border: var(--wds-color-border);
  /* ── checkbox ── */
  --wds-checkbox-border: var(--wds-color-border-strong);
  --wds-checkbox-bg: var(--wds-color-surface);
  --wds-checkbox-bg-checked: var(--wds-color-primary);
  --wds-checkbox-check: var(--wds-color-on-primary);
  --wds-checkbox-radius: var(--wds-radius-control-sm);
  /* ── input ── */
  --wds-input-bg: var(--wds-color-surface);
  --wds-input-bg-disabled: var(--wds-color-surface-muted);
  --wds-input-border: var(--wds-color-border-strong);
  --wds-input-border-focus: var(--wds-color-primary);
  --wds-input-fg: var(--wds-color-text);
  --wds-input-placeholder: var(--wds-color-text-placeholder);
  --wds-input-border-invalid: var(--wds-color-error);
  --wds-input-radius: var(--wds-radius-control);
  --wds-input-height: var(--wds-control-height-md);
  /* ── modal ── */
  --wds-modal-scrim: var(--wds-color-overlay);
  --wds-modal-surface: var(--wds-color-surface-raised);
  /* ── toast ── */
  --wds-toast-surface: var(--wds-color-surface-raised);
  --wds-toast-border: var(--wds-color-border);
}

/* 다크 테마 — semantic 오버라이드만(primitive 유지). P2 확정 — AA는 contrast.test.ts가 보증 */
[data-theme='dark'] {
  color-scheme: dark;
  /* ═══ SEMANTIC — dark ═══ */
  /* ── color ── */
  --wds-color-primary: var(--wds-blue-500);
  --wds-color-primary-hover: var(--wds-blue-400);
  --wds-color-primary-active: var(--wds-blue-600);
  --wds-color-primary-subtle: var(--wds-blue-900);
  --wds-color-primary-strong: var(--wds-blue-500);
  --wds-color-primary-strong-hover: var(--wds-blue-400);
  --wds-color-primary-strong-active: var(--wds-blue-400);
  --wds-color-primary-text: var(--wds-blue-400);
  --wds-color-on-primary: var(--wds-gray-900);
  --wds-color-ink: var(--wds-white);
  --wds-color-ink-hover: var(--wds-gray-100);
  --wds-color-ink-active: var(--wds-gray-200);
  --wds-color-on-ink: var(--wds-gray-900);
  --wds-color-bg: var(--wds-gray-900);
  --wds-color-surface: var(--wds-gray-800);
  --wds-color-surface-muted: var(--wds-gray-700);
  --wds-color-surface-selected: var(--wds-blue-900);
  --wds-color-surface-raised: var(--wds-neutral-tonal-t22);
  --wds-color-text: var(--wds-gray-50);
  --wds-color-text-muted: var(--wds-gray-300);
  --wds-color-text-subtle: var(--wds-gray-400);
  --wds-color-text-placeholder: var(--wds-gray-400);
  --wds-color-text-on-primary: var(--wds-gray-900);
  --wds-color-border: var(--wds-gray-700);
  --wds-color-border-subtle: var(--wds-gray-800);
  --wds-color-border-strong: var(--wds-gray-600);
  --wds-color-focus-ring: var(--wds-blue-500);
  --wds-color-link: var(--wds-blue-400);
  --wds-color-link-hover: var(--wds-blue-500);
  --wds-color-success: var(--wds-green-400);
  --wds-color-warning: var(--wds-amber-400);
  --wds-color-error: var(--wds-red-400);
  --wds-color-info: var(--wds-sky-400);
  --wds-color-success-text: var(--wds-green-400);
  --wds-color-warning-text: var(--wds-amber-400);
  --wds-color-error-text: var(--wds-red-400);
  --wds-color-info-text: var(--wds-sky-400);
  --wds-color-disabled-bg: var(--wds-gray-700);
  --wds-color-disabled-fg: var(--wds-gray-500);
  --wds-color-overlay: rgb(0 0 0 / 60%);
  --wds-color-highlight-bg: var(--wds-blue-700);
  --wds-color-secondary: var(--wds-secondary-tonal-t80);
  --wds-color-on-secondary: var(--wds-secondary-tonal-t20);
  --wds-color-secondary-container: var(--wds-secondary-tonal-t30);
  --wds-color-on-secondary-container: var(--wds-secondary-tonal-t90);
  --wds-color-tertiary: var(--wds-tertiary-tonal-t80);
  --wds-color-on-tertiary: var(--wds-tertiary-tonal-t20);
  --wds-color-tertiary-container: var(--wds-tertiary-tonal-t30);
  --wds-color-on-tertiary-container: var(--wds-tertiary-tonal-t90);
  --wds-color-primary-container: var(--wds-blue-800);
  --wds-color-on-primary-container: var(--wds-blue-100);
  --wds-color-surface-container-lowest: var(--wds-neutral-tonal-t4);
  --wds-color-surface-container-low: var(--wds-neutral-tonal-t10);
  --wds-color-surface-container: var(--wds-neutral-tonal-t12);
  --wds-color-surface-container-high: var(--wds-neutral-tonal-t17);
  --wds-color-surface-container-highest: var(--wds-neutral-tonal-t22);
  --wds-color-outline: var(--wds-neutral-tonal-t60);
  --wds-color-outline-variant: var(--wds-neutral-tonal-t30);
  --wds-color-inverse-surface: var(--wds-neutral-tonal-t90);
  --wds-color-inverse-on-surface: var(--wds-neutral-tonal-t20);
  --wds-color-inverse-primary: var(--wds-blue-tonal-t40);
  --wds-color-error-container: var(--wds-red-tonal-t30);
  --wds-color-on-error-container: var(--wds-red-tonal-t90);
  --wds-color-tag-violet-bg: var(--wds-violet-900);
  --wds-color-tag-violet-text: var(--wds-violet-100);
  --wds-color-tag-violet-solid: var(--wds-violet-500);
  --wds-color-tag-teal-bg: var(--wds-teal-900);
  --wds-color-tag-teal-text: var(--wds-teal-100);
  --wds-color-tag-teal-solid: var(--wds-teal-500);
  --wds-color-tag-magenta-bg: var(--wds-magenta-900);
  --wds-color-tag-magenta-text: var(--wds-magenta-100);
  --wds-color-tag-magenta-solid: var(--wds-magenta-500);
  --wds-color-tag-orange-bg: var(--wds-orange-900);
  --wds-color-tag-orange-text: var(--wds-orange-100);
  --wds-color-tag-orange-solid: var(--wds-orange-500);
  --wds-color-tag-cyan-bg: var(--wds-cyan-900);
  --wds-color-tag-cyan-text: var(--wds-cyan-100);
  --wds-color-tag-cyan-solid: var(--wds-cyan-500);
  --wds-color-success-container: var(--wds-green-tonal-t30);
  --wds-color-on-success-container: var(--wds-green-tonal-t90);
  --wds-color-warning-container: var(--wds-amber-tonal-t30);
  --wds-color-on-warning-container: var(--wds-amber-tonal-t90);
  --wds-color-info-container: var(--wds-sky-tonal-t30);
  --wds-color-on-info-container: var(--wds-sky-tonal-t90);
  --wds-color-surface-hover: #303a47;
  --wds-color-surface-pressed: #39424f;
  /* ── chart 카테고리 (다크 전용 휘도 상향 — CVD 분리 보존) ── */
  --wds-chart-1: #71a5f0;
  --wds-chart-2: #9171f1;
  --wds-chart-3: #51e1cf;
  --wds-chart-4: #f29e59;
  --wds-chart-5: #e54ea3;
  --wds-chart-6: #71db98;
  --wds-chart-7: #1ebfd7;
  --wds-chart-8: #eeaf0d;
  /* ═══ 3) COMPONENT ═══ */
  /* ── alert ── */
  --wds-alert-surface: var(--wds-color-surface);
  --wds-alert-border: var(--wds-color-border);
  /* ── badge ── */
  --wds-badge-neutral-bg: var(--wds-color-surface-muted);
  --wds-badge-neutral-fg: var(--wds-color-text-muted);
  --wds-badge-primary-bg: var(--wds-color-primary-subtle);
  --wds-badge-primary-fg: var(--wds-color-primary-text);
  /* ── button ── */
  --wds-button-bg: var(--wds-color-primary-strong);
  --wds-button-bg-hover: var(--wds-color-primary-strong-hover);
  --wds-button-bg-active: var(--wds-color-primary-strong-active);
  --wds-button-bg-disabled: var(--wds-color-disabled-bg);
  --wds-button-fg: var(--wds-color-on-primary);
  --wds-button-fg-disabled: var(--wds-color-disabled-fg);
  --wds-button-radius: var(--wds-radius-control);
  --wds-button-height-sm: var(--wds-control-height-sm);
  --wds-button-height-md: var(--wds-control-height-md);
  --wds-button-height-lg: var(--wds-control-height-lg);
  /* ── card ── */
  --wds-card-surface: var(--wds-color-surface);
  --wds-card-surface-filled: var(--wds-color-surface-container);
  --wds-card-border: var(--wds-color-border);
  /* ── checkbox ── */
  --wds-checkbox-border: var(--wds-color-border-strong);
  --wds-checkbox-bg: var(--wds-color-surface);
  --wds-checkbox-bg-checked: var(--wds-color-primary);
  --wds-checkbox-check: var(--wds-color-on-primary);
  --wds-checkbox-radius: var(--wds-radius-control-sm);
  /* ── input ── */
  --wds-input-bg: var(--wds-color-surface);
  --wds-input-bg-disabled: var(--wds-color-surface-muted);
  --wds-input-border: var(--wds-color-border-strong);
  --wds-input-border-focus: var(--wds-color-primary);
  --wds-input-fg: var(--wds-color-text);
  --wds-input-placeholder: var(--wds-color-text-placeholder);
  --wds-input-border-invalid: var(--wds-color-error);
  --wds-input-radius: var(--wds-radius-control);
  --wds-input-height: var(--wds-control-height-md);
  /* ── modal ── */
  --wds-modal-scrim: var(--wds-color-overlay);
  --wds-modal-surface: var(--wds-color-surface-raised);
  /* ── toast ── */
  --wds-toast-surface: var(--wds-color-surface-raised);
  --wds-toast-border: var(--wds-color-border);
}

/* ─────────────────────────────────────────────────────────────────────────
 * A3 타입 매트릭스 — 15-스타일 역할 유틸 클래스 (.wds-type-*).
 * composite typography 토큰(tokens/core/typography.json `text.*`)의 프리미티브 평면화.
 * 기존 .wds-h1/.wds-body-1 등(tokens/wds-base.css) 및 색 헬퍼 .wds-text-*는 별도 보존.
 * ─────────────────────────────────────────────────────────────────────── */
/* Display Large 48 — 히어로/마케팅 표제. 레거시 display-1 매핑(자간 동일, leading은 snug) */
.wds-type-display-l {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, calc(1.739vw + 1.609rem), 3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* Display Medium 40 */
.wds-type-display-m {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 600;
  font-size: clamp(1.75rem, calc(1.304vw + 1.457rem), 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* Display Small 36 */
.wds-type-display-s {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 600;
  font-size: clamp(1.625rem, calc(1.087vw + 1.38rem), 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* Headline Large 32 — 레거시 h1 동치 */
.wds-type-headline-l {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, calc(0.87vw + 1.304rem), 2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
/* Headline Medium 28 */
.wds-type-headline-m {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 600;
  font-size: clamp(1.375rem, calc(0.652vw + 1.228rem), 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* Headline Small 24 — 레거시 h2 동치 */
.wds-type-headline-s {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, calc(0.435vw + 1.152rem), 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* Title Large 20 */
.wds-type-title-l {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* Title Medium 18 — 레거시 h3 동치 */
.wds-type-title-m {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* Title Small 16 */
.wds-type-title-s {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* Body Large 16 — 레거시 body-1 동치 */
.wds-type-body-l {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0em;
}
/* Body Medium 14 — 레거시 body-2 동치 */
.wds-type-body-m {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0em;
}
/* Body Small 13 */
.wds-type-body-s {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0em;
}
/* Label Large 14 — 버튼/탭 라벨 */
.wds-type-label-l {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
/* Label Medium 12 */
.wds-type-label-m {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
/* Label Small 11 */
.wds-type-label-s {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Track B 5-4 Phase 1 — Bloom Depth 엘리베이션 유틸 클래스 (.wds-elevation-*).
 * 깊이=surface-container 틴트 농도(1차)·shadow는 보조. 멤버는 var() 참조로 emit돼
 * [data-theme] cascade에서 surface 틴트가 자동 재해석된다(테마 반응적·다크 틴트 우선).
 * surface=시맨틱 surface-container 5-tier 소비, shadow=core shadow 소비(00 §3.2 — 새 tone 없음).
 * ─────────────────────────────────────────────────────────────────────── */
/* 휴지(resting) 페이지·베이스 카드. surface-container-lowest 틴트만, 그림자 없음 — 깊이=틴트 원칙의 0점. */
.wds-elevation-flat {
  background-color: var(--wds-color-surface-container-lowest);
}
/* 카드·올라온 컨트롤. surface-container-low 틴트 + sm 그림자(보조). */
.wds-elevation-raised {
  background-color: var(--wds-color-surface-container-low);
  box-shadow: var(--wds-shadow-sm);
}
/* 드롭다운·팝오버·툴팁. surface-container-high 틴트 + md 그림자(보조). */
.wds-elevation-overlay {
  background-color: var(--wds-color-surface-container-high);
  box-shadow: var(--wds-shadow-md);
}
/* 모달·시트·다이얼로그. surface-container-highest 틴트 + lg 그림자(보조). */
.wds-elevation-modal {
  background-color: var(--wds-color-surface-container-highest);
  box-shadow: var(--wds-shadow-lg);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Track B 5-4 Phase 2 — Bloom Depth glass 머티리얼 (.wds-material-*).
 * surface-container 틴트(opacity) + backdrop blur + shadow 번들. regular=가독·clear=콘텐츠 위.
 * a11y 적응 내장: prefers-reduced-transparency→불투명·blur 제거 · prefers-contrast→보더.
 * 명시 적용용 유틸 — 테마 스위처는 [data-wds-material]×[data-wds-surface] 바인딩을 쓴다.
 * ─────────────────────────────────────────────────────────────────────── */
/* 가독 우선 — 틴트 농도 높음(0.82)·blur 중간(16px)·채도 1.6×·굴절 13px(절제). 패널·시트·고정 헤더 등 텍스트가 얹히는 표면. refraction 값은 GlassFilterDefs의 #wds-glass-refraction-regular feDisplacementMap scale과 동기. */
.wds-material-regular {
  background-color: color-mix(in srgb, var(--wds-color-surface-container-low) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--wds-shadow-md);
}
@media (prefers-reduced-transparency: reduce) {
  .wds-material-regular {
    background-color: var(--wds-color-surface-container-low);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .wds-material-regular { outline: 1px solid var(--wds-color-border); outline-offset: -1px; }
}
@media (prefers-reduced-transparency: no-preference) and (prefers-contrast: no-preference) {
  [data-wds-glass='refraction'] .wds-material-regular {
    box-shadow: var(--wds-shadow-md), inset 0 1px 0 0 color-mix(in srgb, white 55%, transparent), inset 0 0 0 1px color-mix(in srgb, white 10%, transparent);
  }
  [data-theme='dark'][data-wds-glass='refraction'] .wds-material-regular, [data-theme='dark'] [data-wds-glass='refraction'] .wds-material-regular {
    box-shadow: var(--wds-shadow-md), inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent), inset 0 0 0 1px color-mix(in srgb, white 6%, transparent);
  }
  @supports (backdrop-filter: url('#wds-glass-refraction-regular')) or (-webkit-backdrop-filter: url('#wds-glass-refraction-regular')) {
    [data-wds-glass='refraction'] .wds-material-regular {
      backdrop-filter: url(#wds-glass-refraction-regular) blur(9px) saturate(1.8);
    }
  }
}
/* 콘텐츠 위 — 틴트 옅음(0.6)·blur 강함(24px)·채도 1.8×·굴절 22px(+미세 색수차). 미디어/콘텐츠 위에 떠 배경이 비치는 오버레이 표면 — 60% 틴트라 본문/보조 텍스트(text-muted·text-subtle)는 AA 미달 가능하므로 금지하고 full-strength text(또는 비텍스트 컨트롤)만 얹는다. refraction(22)은 굴절 향상 emit을 켜는 의도 신호이며, GlassFilterDefs의 #wds-glass-refraction-clear는 RGB 채널을 scale 24/22/20로 분리 변위해 색수차(가장자리 프리즘)를 낸다(G=22가 토큰값 기준). */
.wds-material-clear {
  background-color: color-mix(in srgb, var(--wds-color-surface-container-lowest) 60%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: var(--wds-shadow-sm);
}
@media (prefers-reduced-transparency: reduce) {
  .wds-material-clear {
    background-color: var(--wds-color-surface-container-lowest);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .wds-material-clear { outline: 1px solid var(--wds-color-border); outline-offset: -1px; }
}
@media (prefers-reduced-transparency: no-preference) and (prefers-contrast: no-preference) {
  [data-wds-glass='refraction'] .wds-material-clear {
    box-shadow: var(--wds-shadow-sm), inset 0 1px 0 0 color-mix(in srgb, white 55%, transparent), inset 0 0 0 1px color-mix(in srgb, white 10%, transparent);
  }
  [data-theme='dark'][data-wds-glass='refraction'] .wds-material-clear, [data-theme='dark'] [data-wds-glass='refraction'] .wds-material-clear {
    box-shadow: var(--wds-shadow-sm), inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent), inset 0 0 0 1px color-mix(in srgb, white 6%, transparent);
  }
  @supports (backdrop-filter: url('#wds-glass-refraction-clear')) or (-webkit-backdrop-filter: url('#wds-glass-refraction-clear')) {
    [data-wds-glass='refraction'] .wds-material-clear {
      backdrop-filter: url(#wds-glass-refraction-clear) blur(13px) saturate(2);
    }
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Track B 5-4 Phase 2 — 머티리얼 테마 축([data-wds-material]) × surface 계약([data-wds-surface]).
 * 컴포넌트는 중립 data-wds-surface 훅만 부착 — 머티리얼 모양은 이 스코프 레이어가 결정한다.
 * solid(기본)는 컴포넌트 표면이 담당(미스코프). 새 머티리얼 = 바인딩 한 줄, 컴포넌트 변경 0.
 * ─────────────────────────────────────────────────────────────────────── */
[data-wds-material='liquid-glass'] [data-wds-surface='overlay'] {
  background-color: color-mix(in srgb, var(--wds-color-surface-container-low) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--wds-shadow-md);
}
@media (prefers-reduced-transparency: reduce) {
  [data-wds-material='liquid-glass'] [data-wds-surface='overlay'] {
    background-color: var(--wds-color-surface-container-low);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  [data-wds-material='liquid-glass'] [data-wds-surface='overlay'] { outline: 1px solid var(--wds-color-border); outline-offset: -1px; }
}
@media (prefers-reduced-transparency: no-preference) and (prefers-contrast: no-preference) {
  [data-wds-glass='refraction'] [data-wds-material='liquid-glass'] [data-wds-surface='overlay'] {
    box-shadow: var(--wds-shadow-md), inset 0 1px 0 0 color-mix(in srgb, white 55%, transparent), inset 0 0 0 1px color-mix(in srgb, white 10%, transparent);
  }
  [data-theme='dark'][data-wds-glass='refraction'] [data-wds-material='liquid-glass'] [data-wds-surface='overlay'], [data-theme='dark'] [data-wds-glass='refraction'] [data-wds-material='liquid-glass'] [data-wds-surface='overlay'] {
    box-shadow: var(--wds-shadow-md), inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent), inset 0 0 0 1px color-mix(in srgb, white 6%, transparent);
  }
  @supports (backdrop-filter: url('#wds-glass-refraction-regular')) or (-webkit-backdrop-filter: url('#wds-glass-refraction-regular')) {
    [data-wds-glass='refraction'] [data-wds-material='liquid-glass'] [data-wds-surface='overlay'] {
      backdrop-filter: url(#wds-glass-refraction-regular) blur(9px) saturate(1.8);
    }
  }
}
[data-wds-material='liquid-glass'] [data-wds-surface='floating'] {
  background-color: color-mix(in srgb, var(--wds-color-surface-container-lowest) 60%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: var(--wds-shadow-sm);
}
@media (prefers-reduced-transparency: reduce) {
  [data-wds-material='liquid-glass'] [data-wds-surface='floating'] {
    background-color: var(--wds-color-surface-container-lowest);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  [data-wds-material='liquid-glass'] [data-wds-surface='floating'] { outline: 1px solid var(--wds-color-border); outline-offset: -1px; }
}
@media (prefers-reduced-transparency: no-preference) and (prefers-contrast: no-preference) {
  [data-wds-glass='refraction'] [data-wds-material='liquid-glass'] [data-wds-surface='floating'] {
    box-shadow: var(--wds-shadow-sm), inset 0 1px 0 0 color-mix(in srgb, white 55%, transparent), inset 0 0 0 1px color-mix(in srgb, white 10%, transparent);
  }
  [data-theme='dark'][data-wds-glass='refraction'] [data-wds-material='liquid-glass'] [data-wds-surface='floating'], [data-theme='dark'] [data-wds-glass='refraction'] [data-wds-material='liquid-glass'] [data-wds-surface='floating'] {
    box-shadow: var(--wds-shadow-sm), inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent), inset 0 0 0 1px color-mix(in srgb, white 6%, transparent);
  }
  @supports (backdrop-filter: url('#wds-glass-refraction-clear')) or (-webkit-backdrop-filter: url('#wds-glass-refraction-clear')) {
    [data-wds-glass='refraction'] [data-wds-material='liquid-glass'] [data-wds-surface='floating'] {
      backdrop-filter: url(#wds-glass-refraction-clear) blur(13px) saturate(2);
    }
  }
}

/* 브랜드 오버레이 — demo (ADR-020). semantic 재정의 + component 재해석. 미정의 토큰은 wiz 상속. */
[data-brand='demo'] {
  /* ═══ BRAND demo — semantic light ═══ */
  /* ── color ── */
  --wds-color-primary: #006a61;
  --wds-color-on-primary: #ffffff;
  --wds-color-primary-container: #cbe9e4;
  --wds-color-on-primary-container: #02201d;
  --wds-color-secondary: #3c6755;
  --wds-color-on-secondary: #ffffff;
  --wds-color-secondary-container: #d7e6df;
  --wds-color-on-secondary-container: #111e19;
  --wds-color-tertiary: #006688;
  --wds-color-on-tertiary: #ffffff;
  --wds-color-tertiary-container: #d2e5f2;
  --wds-color-on-tertiary-container: #081e28;
  --wds-color-surface-container-lowest: #ffffff;
  --wds-color-surface-container-low: #f2f4f6;
  --wds-color-surface-container: #eceef1;
  --wds-color-surface-container-high: #e6e8ec;
  --wds-color-surface-container-highest: #e0e3e7;
  --wds-color-on-surface: #141c2a;
  --wds-color-outline: #707785;
  --wds-color-outline-variant: #c2c7ce;
  --wds-color-inverse-surface: #273140;
  --wds-color-inverse-on-surface: #eff1f3;
  --wds-color-inverse-primary: #9ad1c9;
  --wds-color-primary-hover: #005049;
  --wds-color-primary-active: #003732;
  --wds-color-primary-subtle: #e5f4f1;
  --wds-color-primary-strong: #006a61;
  --wds-color-primary-strong-hover: #005049;
  --wds-color-primary-strong-active: #003732;
  --wds-color-primary-text: #006a61;
  --wds-color-link: #006a61;
  --wds-color-link-hover: #005049;
  --wds-color-focus-ring: #006a61;
  --wds-color-text-on-primary: #ffffff;
  /* ═══ 3) COMPONENT ═══ */
  /* ── alert ── */
  --wds-alert-surface: var(--wds-color-surface);
  --wds-alert-border: var(--wds-color-border);
  /* ── badge ── */
  --wds-badge-neutral-bg: var(--wds-color-surface-muted);
  --wds-badge-neutral-fg: var(--wds-color-text-muted);
  --wds-badge-primary-bg: var(--wds-color-primary-subtle);
  --wds-badge-primary-fg: var(--wds-color-primary-text);
  /* ── button ── */
  --wds-button-bg: var(--wds-color-primary-strong);
  --wds-button-bg-hover: var(--wds-color-primary-strong-hover);
  --wds-button-bg-active: var(--wds-color-primary-strong-active);
  --wds-button-bg-disabled: var(--wds-color-disabled-bg);
  --wds-button-fg: var(--wds-color-on-primary);
  --wds-button-fg-disabled: var(--wds-color-disabled-fg);
  --wds-button-radius: var(--wds-radius-control);
  --wds-button-height-sm: var(--wds-control-height-sm);
  --wds-button-height-md: var(--wds-control-height-md);
  --wds-button-height-lg: var(--wds-control-height-lg);
  /* ── card ── */
  --wds-card-surface: var(--wds-color-surface);
  --wds-card-surface-filled: var(--wds-color-surface-container);
  --wds-card-border: var(--wds-color-border);
  /* ── checkbox ── */
  --wds-checkbox-border: var(--wds-color-border-strong);
  --wds-checkbox-bg: var(--wds-color-surface);
  --wds-checkbox-bg-checked: var(--wds-color-primary);
  --wds-checkbox-check: var(--wds-color-on-primary);
  --wds-checkbox-radius: var(--wds-radius-control-sm);
  /* ── input ── */
  --wds-input-bg: var(--wds-color-surface);
  --wds-input-bg-disabled: var(--wds-color-surface-muted);
  --wds-input-border: var(--wds-color-border-strong);
  --wds-input-border-focus: var(--wds-color-primary);
  --wds-input-fg: var(--wds-color-text);
  --wds-input-placeholder: var(--wds-color-text-placeholder);
  --wds-input-border-invalid: var(--wds-color-error);
  --wds-input-radius: var(--wds-radius-control);
  --wds-input-height: var(--wds-control-height-md);
  /* ── modal ── */
  --wds-modal-scrim: var(--wds-color-overlay);
  --wds-modal-surface: var(--wds-color-surface-raised);
  /* ── toast ── */
  --wds-toast-surface: var(--wds-color-surface-raised);
  --wds-toast-border: var(--wds-color-border);
}
[data-brand='demo'][data-theme='dark'], [data-brand='demo'] [data-theme='dark'] {
  color-scheme: dark;
  /* ═══ BRAND demo — semantic dark ═══ */
  /* ── color ── */
  --wds-color-primary: #9ad1c9;
  --wds-color-on-primary: #003732;
  --wds-color-primary-container: #005049;
  --wds-color-on-primary-container: #cbe9e4;
  --wds-color-secondary: #b2ccc0;
  --wds-color-on-secondary: #19362a;
  --wds-color-secondary-container: #294e3f;
  --wds-color-on-secondary-container: #d7e6df;
  --wds-color-tertiary: #a7cce2;
  --wds-color-on-tertiary: #003548;
  --wds-color-tertiary-container: #004d67;
  --wds-color-on-tertiary-container: #d2e5f2;
  --wds-color-surface-container-lowest: #0b0e17;
  --wds-color-surface-container-low: #141c2a;
  --wds-color-surface-container: #17202e;
  --wds-color-surface-container-high: #212b39;
  --wds-color-surface-container-highest: #2b3544;
  --wds-color-on-surface: #e0e3e7;
  --wds-color-outline: #8a919e;
  --wds-color-outline-variant: #3d4757;
  --wds-color-inverse-surface: #e0e3e7;
  --wds-color-inverse-on-surface: #273140;
  --wds-color-inverse-primary: #006a61;
  --wds-color-primary-hover: #cbe9e4;
  --wds-color-primary-active: #68b9ae;
  --wds-color-primary-subtle: #003732;
  --wds-color-primary-strong: #68b9ae;
  --wds-color-primary-strong-hover: #9ad1c9;
  --wds-color-primary-strong-active: #cbe9e4;
  --wds-color-primary-text: #68b9ae;
  --wds-color-link: #68b9ae;
  --wds-color-link-hover: #9ad1c9;
  --wds-color-focus-ring: #9ad1c9;
  --wds-color-text-on-primary: #003732;
  /* ═══ 3) COMPONENT ═══ */
  /* ── alert ── */
  --wds-alert-surface: var(--wds-color-surface);
  --wds-alert-border: var(--wds-color-border);
  /* ── badge ── */
  --wds-badge-neutral-bg: var(--wds-color-surface-muted);
  --wds-badge-neutral-fg: var(--wds-color-text-muted);
  --wds-badge-primary-bg: var(--wds-color-primary-subtle);
  --wds-badge-primary-fg: var(--wds-color-primary-text);
  /* ── button ── */
  --wds-button-bg: var(--wds-color-primary-strong);
  --wds-button-bg-hover: var(--wds-color-primary-strong-hover);
  --wds-button-bg-active: var(--wds-color-primary-strong-active);
  --wds-button-bg-disabled: var(--wds-color-disabled-bg);
  --wds-button-fg: var(--wds-color-on-primary);
  --wds-button-fg-disabled: var(--wds-color-disabled-fg);
  --wds-button-radius: var(--wds-radius-control);
  --wds-button-height-sm: var(--wds-control-height-sm);
  --wds-button-height-md: var(--wds-control-height-md);
  --wds-button-height-lg: var(--wds-control-height-lg);
  /* ── card ── */
  --wds-card-surface: var(--wds-color-surface);
  --wds-card-surface-filled: var(--wds-color-surface-container);
  --wds-card-border: var(--wds-color-border);
  /* ── checkbox ── */
  --wds-checkbox-border: var(--wds-color-border-strong);
  --wds-checkbox-bg: var(--wds-color-surface);
  --wds-checkbox-bg-checked: var(--wds-color-primary);
  --wds-checkbox-check: var(--wds-color-on-primary);
  --wds-checkbox-radius: var(--wds-radius-control-sm);
  /* ── input ── */
  --wds-input-bg: var(--wds-color-surface);
  --wds-input-bg-disabled: var(--wds-color-surface-muted);
  --wds-input-border: var(--wds-color-border-strong);
  --wds-input-border-focus: var(--wds-color-primary);
  --wds-input-fg: var(--wds-color-text);
  --wds-input-placeholder: var(--wds-color-text-placeholder);
  --wds-input-border-invalid: var(--wds-color-error);
  --wds-input-radius: var(--wds-radius-control);
  --wds-input-height: var(--wds-control-height-md);
  /* ── modal ── */
  --wds-modal-scrim: var(--wds-color-overlay);
  --wds-modal-surface: var(--wds-color-surface-raised);
  /* ── toast ── */
  --wds-toast-surface: var(--wds-color-surface-raised);
  --wds-toast-border: var(--wds-color-border);
}
}