@3w-witim/ui 0.1.0

package/dist/tokens.css

@@ -0,0 +1,662 @@
+/* ⚠ 새 :root 변수 블록 추가 시 [data-theme="light"]를 항상 함께 나열할 것 — 라이트 핀 래퍼 동작 조건 */
+:root,
+[data-theme="light"] {
+  /* ---- primitive ---- */
+  --color-witim-primary-10: #f7f8ff;
+  --color-witim-primary-20: #dcdfff;
+  --color-witim-primary-30: #b9beff;
+  --color-witim-primary-40: #8893ff;
+  --color-witim-primary-50: #455fff;
+  --color-witim-primary-60: #3f57ec;
+  --color-witim-primary-70: #394ed5;
+  --color-witim-primary-80: #3144b9;
+  --color-witim-primary-90: #29389b;
+  --color-witim-primary-100: #1e2972;
+  --color-witim-red-10: #fef7f7;
+  --color-witim-red-20: #fadcdc;
+  --color-witim-red-30: #f6b8b8;
+  --color-witim-red-40: #f28888;
+  --color-witim-red-50: #ef4444;
+  --color-witim-red-60: #dd3f3f;
+  --color-witim-red-70: #c7383a;
+  --color-witim-red-80: #ad3133;
+  --color-witim-red-90: #90292c;
+  --color-witim-red-100: #691e24;
+  --color-witim-gray-10: #f7f7f9;
+  --color-witim-gray-20: #ebecf1;
+  --color-witim-gray-30: #bdbecc;
+  --color-witim-gray-40: #9192a4;
+  --color-witim-gray-50: #51536a;
+  --color-witim-gray-60: #3f4155;
+  --color-witim-gray-70: #292a36;
+  --color-witim-gray-80: #20212b;
+  --color-witim-gray-90: #181920;
+  --color-witim-gray-100: #0f0f13;
+  --color-witim-common-white: #ffffff;
+  --color-witim-common-black: #0e0f1a;
+  --color-witim-whiteAlpha-8: #ffffff14;
+  --color-witim-whiteAlpha-16: #ffffff29;
+  --color-witim-whiteAlpha-60: #ffffff99;
+  --color-witim-blackAlpha-8: #0e0f1a14;
+  --color-witim-blackAlpha-16: #0e0f1a29;
+  --color-witim-blackAlpha-60: #0e0f1a99;
+
+  /* ---- semantic (light = default) ---- */
+  --color-bg-base: var(--color-witim-gray-20);
+  --color-bg-subtle: var(--color-witim-gray-30);
+  --color-bg-emphasis: var(--color-witim-gray-40);
+  --color-surface-default: var(--color-witim-common-white);
+  --color-surface-raised: var(--color-witim-common-white);
+  --color-surface-sunken: var(--color-witim-gray-20);
+  --color-surface-hover: var(--color-witim-blackAlpha-8);
+  --color-surface-pressed: var(--color-witim-blackAlpha-16);
+  --color-overlay-scrim: var(--color-witim-blackAlpha-60);
+  --color-text-strong: var(--color-witim-gray-100);
+  --color-text-default: var(--color-witim-gray-90);
+  --color-text-subtle: var(--color-witim-gray-50);
+  --color-text-disabled: var(--color-witim-gray-40);
+  --color-text-on-brand: var(--color-witim-common-white);
+  --color-border-subtle: var(--color-witim-gray-20);
+  --color-border-default: var(--color-witim-gray-30);
+  --color-border-strong: var(--color-witim-gray-50);
+  --color-border-focus: var(--color-witim-primary-50);
+  --color-brand-solid: var(--color-witim-primary-50);
+  --color-brand-solid-hover: var(--color-witim-primary-60);
+  --color-brand-solid-pressed: var(--color-witim-primary-70);
+  --color-brand-subtle: var(--color-witim-primary-10);
+  --color-brand-text: var(--color-witim-primary-60);
+  --color-brand-border: var(--color-witim-primary-30);
+  --color-danger-solid: var(--color-witim-red-50);
+  --color-danger-solid-hover: var(--color-witim-red-60);
+  --color-danger-subtle: var(--color-witim-red-10);
+  --color-danger-text: var(--color-witim-red-70);
+  --color-danger-border: var(--color-witim-red-30);
+  --color-sidebar-bg: var(--color-witim-gray-10);
+  --color-sidebar-accent: var(--color-witim-gray-20);
+  --color-sidebar-fg: var(--color-witim-gray-50);
+  --color-sidebar-accent-fg: var(--color-witim-gray-90);
+  --color-rail-active: var(--color-witim-primary-20);
+  --color-rail-active-fg: var(--color-witim-primary-60);
+  --color-brand-soft: var(--color-witim-primary-40);
+  --color-chart-muted: var(--color-witim-gray-30);
+  --color-presence-away-bg: var(--color-witim-gray-50);
+  --color-presence-away-fg: var(--color-witim-common-white);
+  --color-presence-offline: var(--color-witim-gray-40);
+
+  /* ---- component (derived) ---- */
+  --comp-button-primary-bg: var(--color-brand-solid);
+  --comp-button-primary-bg-hover: var(--color-brand-solid-hover);
+  --comp-button-primary-bg-press: var(--color-brand-solid-pressed);
+  --comp-button-primary-text: var(--color-text-on-brand);
+  --comp-button-danger-bg: var(--color-danger-solid);
+  --comp-button-danger-bg-hover: var(--color-danger-solid-hover);
+  --comp-button-danger-text: var(--color-text-on-brand);
+  --comp-button-neutral-bg: var(--color-surface-default);
+  --comp-button-neutral-bg-hover: var(--color-surface-hover);
+  --comp-button-neutral-border: var(--color-border-default);
+  --comp-button-neutral-text: var(--color-text-default);
+  --comp-button-ghost-bg-hover: var(--color-surface-hover);
+  --comp-button-ghost-text: var(--color-text-default);
+  --comp-button-disabled-bg: var(--color-bg-emphasis);
+  --comp-button-disabled-text: var(--color-text-disabled);
+  --comp-input-bg: var(--color-surface-default);
+  --comp-input-border: var(--color-border-default);
+  --comp-input-border-hover: var(--color-border-strong);
+  --comp-input-border-focus: var(--color-border-focus);
+  --comp-input-border-error: var(--color-danger-border);
+  --comp-input-text: var(--color-text-default);
+  --comp-input-placeholder: var(--color-text-subtle);
+  --comp-input-disabled-bg: var(--color-bg-subtle);
+  --comp-card-bg: var(--color-surface-default);
+  --comp-card-bg-raised: var(--color-surface-raised);
+  --comp-card-border: var(--color-border-subtle);
+  --comp-label-neutral-bg: var(--color-witim-gray-20);
+  --comp-label-neutral-text: var(--color-text-default);
+  --comp-label-brand-bg: var(--color-brand-subtle);
+  --comp-label-brand-text: var(--color-brand-text);
+  --comp-label-danger-bg: var(--color-danger-subtle);
+  --comp-label-danger-text: var(--color-danger-text);
+  --comp-choice-bg: var(--color-surface-default);
+  --comp-choice-border: var(--color-border-strong);
+  --comp-choice-bg-checked: var(--color-brand-solid);
+  --comp-choice-mark: var(--color-text-on-brand);
+  --comp-choice-border-disabled: var(--color-border-subtle);
+  --comp-toggle-track: var(--color-bg-emphasis);
+  --comp-toggle-track-on: var(--color-brand-solid);
+  --comp-toggle-thumb: var(--color-witim-common-white);
+  --comp-tooltip-bg: var(--color-witim-gray-90);
+  --comp-tooltip-text: var(--color-witim-common-white);
+  --comp-modal-bg: var(--color-surface-raised);
+  --comp-modal-border: var(--color-border-subtle);
+  --comp-modal-scrim: var(--color-overlay-scrim);
+  --comp-dropdown-bg: var(--color-surface-raised);
+  --comp-dropdown-border: var(--color-border-subtle);
+  --comp-dropdown-item-text: var(--color-text-default);
+  --comp-dropdown-item-bg-hover: var(--color-surface-hover);
+  --comp-dropdown-item-text-active: var(--color-brand-text);
+  --comp-tab-text: var(--color-text-subtle);
+  --comp-tab-text-active: var(--color-text-strong);
+  --comp-tab-indicator: var(--color-brand-solid);
+  --comp-tab-border: var(--color-border-subtle);
+  --comp-tab-bg-hover: var(--color-surface-hover);
+  --comp-table-header-bg: var(--color-bg-subtle);
+  --comp-table-header-text: var(--color-text-subtle);
+  --comp-table-cell-text: var(--color-text-default);
+  --comp-table-border: var(--color-border-subtle);
+  --comp-table-row-bg-hover: var(--color-surface-hover);
+  --comp-table-row-bg-selected: var(--color-brand-subtle);
+  --comp-toast-bg: var(--color-surface-raised);
+  --comp-toast-border: var(--color-border-subtle);
+  --comp-toast-text: var(--color-text-default);
+  --comp-avatar-bg: var(--color-bg-emphasis);
+  --comp-avatar-text: var(--color-text-default);
+  --comp-avatar-ring: var(--color-surface-default);
+  --comp-sheet-bg: var(--color-surface-raised);
+  --comp-sheet-border: var(--color-border-subtle);
+  --comp-sheet-scrim: var(--color-overlay-scrim);
+  --comp-sheet-handle: var(--color-bg-emphasis);
+  --comp-select-bg: var(--color-surface-default);
+  --comp-select-border: var(--color-border-default);
+  --comp-select-border-hover: var(--color-border-strong);
+  --comp-select-border-focus: var(--color-border-focus);
+  --comp-select-text: var(--color-text-default);
+  --comp-select-placeholder: var(--color-text-subtle);
+  --comp-select-disabled-bg: var(--color-bg-subtle);
+  --comp-textarea-bg: var(--color-surface-default);
+  --comp-textarea-border: var(--color-border-default);
+  --comp-textarea-border-hover: var(--color-border-strong);
+  --comp-textarea-border-focus: var(--color-border-focus);
+  --comp-textarea-text: var(--color-text-default);
+  --comp-textarea-placeholder: var(--color-text-subtle);
+  --comp-textarea-disabled-bg: var(--color-bg-subtle);
+  --comp-chip-bg: var(--color-surface-default);
+  --comp-chip-text: var(--color-text-default);
+  --comp-chip-border: var(--color-border-default);
+  --comp-chip-bg-hover: var(--color-surface-hover);
+  --comp-chip-bg-selected: var(--color-brand-subtle);
+  --comp-chip-text-selected: var(--color-brand-text);
+  --comp-chip-border-selected: var(--color-brand-border);
+  --comp-chip-remove: var(--color-text-subtle);
+  --comp-alert-info-bg: var(--color-brand-subtle);
+  --comp-alert-info-text: var(--color-brand-text);
+  --comp-alert-info-border: var(--color-brand-border);
+  --comp-alert-danger-bg: var(--color-danger-subtle);
+  --comp-alert-danger-text: var(--color-danger-text);
+  --comp-alert-danger-border: var(--color-danger-border);
+  --comp-alert-neutral-bg: var(--color-bg-subtle);
+  --comp-alert-neutral-text: var(--color-text-default);
+  --comp-alert-neutral-border: var(--color-border-subtle);
+  --comp-pagination-text: var(--color-text-default);
+  --comp-pagination-bg-hover: var(--color-surface-hover);
+  --comp-pagination-bg-active: var(--color-brand-solid);
+  --comp-pagination-text-active: var(--color-text-on-brand);
+  --comp-pagination-disabled: var(--color-text-disabled);
+  --comp-progress-track: var(--color-bg-subtle);
+  --comp-progress-fill: var(--color-brand-solid);
+  --comp-skeleton-base: var(--color-bg-subtle);
+  --comp-skeleton-shimmer: var(--color-bg-emphasis);
+  --comp-segment-bg: var(--color-bg-subtle);
+  --comp-segment-thumb: var(--color-surface-default);
+  --comp-segment-text: var(--color-text-subtle);
+  --comp-segment-text-active: var(--color-text-strong);
+  /* component shadows -> elevation roles */
+  --comp-modal-shadow: var(--elevation-modal);
+  --comp-dropdown-shadow: var(--elevation-dropdown);
+  --comp-toast-shadow: var(--elevation-toast);
+  --comp-sheet-shadow: var(--elevation-modal);
+}
+
+[data-theme="dark"] {
+  /* semantic overrides */
+  --color-bg-base: var(--color-witim-gray-100);
+  --color-bg-subtle: var(--color-witim-gray-90);
+  --color-bg-emphasis: var(--color-witim-gray-70);
+  --color-surface-default: var(--color-witim-gray-80);
+  --color-surface-raised: var(--color-witim-gray-70);
+  --color-surface-sunken: var(--color-witim-gray-90);
+  --color-surface-hover: var(--color-witim-gray-70);
+  --color-surface-pressed: var(--color-witim-gray-60);
+  --color-overlay-scrim: var(--color-witim-blackAlpha-60);
+  --color-text-strong: var(--color-witim-gray-20);
+  --color-text-default: var(--color-witim-gray-30);
+  --color-text-subtle: var(--color-witim-gray-40);
+  --color-text-disabled: var(--color-witim-gray-50);
+  --color-text-on-brand: var(--color-witim-common-white);
+  --color-border-subtle: var(--color-witim-gray-60);
+  --color-border-default: var(--color-witim-gray-50);
+  --color-border-strong: var(--color-witim-gray-40);
+  --color-border-focus: var(--color-witim-primary-40);
+  --color-brand-solid: var(--color-witim-primary-50);
+  --color-brand-solid-hover: var(--color-witim-primary-40);
+  --color-brand-solid-pressed: var(--color-witim-primary-30);
+  --color-brand-subtle: var(--color-witim-primary-100);
+  --color-brand-text: var(--color-witim-primary-40);
+  --color-brand-border: var(--color-witim-primary-70);
+  --color-danger-solid: var(--color-witim-red-50);
+  --color-danger-solid-hover: var(--color-witim-red-40);
+  --color-danger-subtle: var(--color-witim-red-100);
+  --color-danger-text: var(--color-witim-red-40);
+  --color-danger-border: var(--color-witim-red-70);
+  --color-sidebar-bg: var(--color-witim-gray-80);
+  --color-sidebar-accent: var(--color-witim-gray-70);
+  --color-sidebar-fg: var(--color-witim-gray-30);
+  --color-sidebar-accent-fg: var(--color-witim-common-white);
+  /* rail-active(-fg) 는 라이트/다크 동일 — 다크 오버라이드 없음 */
+  --color-brand-soft: var(--color-witim-primary-70);
+  --color-chart-muted: var(--color-witim-gray-60);
+  --color-presence-away-bg: var(--color-witim-gray-30);
+  --color-presence-away-fg: var(--color-witim-gray-90);
+  /* presence-offline 은 라이트/다크 동일(gray-40) — 다크 오버라이드 없음 */
+  /* component overrides (inverse) */
+  --comp-label-neutral-bg: var(--color-witim-gray-60);
+  /* tooltip: 다크에선 반전(밝은 버블 + 검정 텍스트) — 어두운 페이지 위에서 뚜렷 */
+  --comp-tooltip-bg: var(--color-witim-gray-10);
+  --comp-tooltip-text: var(--color-witim-common-black);
+}
+/* === FOUNDATION: radius + typography (gen_typography.py) === */
+:root,
+[data-theme="light"] {
+  /* radius */
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-lg: 20px;
+  --radius-full: 9999px;
+
+  /* typography */
+  --font-sans:
+    "Inter", "Pretendard", -apple-system, BlinkMacSystemFont,
+    "Apple SD Gothic Neo", sans-serif;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --tracking-kr: -0.04em;
+  --tracking-en: -0.02em;
+  --text-display-size: 32px;
+  --text-heading-lg-size: 28px;
+  --text-heading-md-size: 24px;
+  --text-heading-sm-size: 20px;
+  --text-title-size: 18px;
+  --text-body-lg-size: 18px;
+  --text-body-size: 16px;
+  --text-body-sm-size: 14px;
+  --text-button1-size: 18px;
+  --text-button2-size: 16px;
+  --text-label1-size: 14px;
+  --text-label2-size: 14px;
+  --text-caption-size: 12px;
+}
+
+/* text styles — apply directly, e.g. <h1 class="text-display"> */
+.text-display {
+  font-family: var(--font-sans);
+  font-size: var(--text-display-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+.text-heading-lg {
+  font-family: var(--font-sans);
+  font-size: var(--text-heading-lg-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+.text-heading-md {
+  font-family: var(--font-sans);
+  font-size: var(--text-heading-md-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+.text-heading-sm {
+  font-family: var(--font-sans);
+  font-size: var(--text-heading-sm-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+.text-title {
+  font-family: var(--font-sans);
+  font-size: var(--text-title-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+.text-body-lg {
+  font-family: var(--font-sans);
+  font-size: var(--text-body-lg-size);
+  font-weight: var(--font-weight-regular);
+  line-height: 1.5;
+  letter-spacing: var(--tracking-kr);
+}
+.text-body {
+  font-family: var(--font-sans);
+  font-size: var(--text-body-size);
+  font-weight: var(--font-weight-regular);
+  line-height: 1.5;
+  letter-spacing: var(--tracking-kr);
+}
+.text-body-sm {
+  font-family: var(--font-sans);
+  font-size: var(--text-body-sm-size);
+  font-weight: var(--font-weight-regular);
+  line-height: 1.5;
+  letter-spacing: var(--tracking-kr);
+}
+.text-button1 {
+  font-family: var(--font-sans);
+  font-size: var(--text-button1-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+.text-button2 {
+  font-family: var(--font-sans);
+  font-size: var(--text-button2-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+.text-label1 {
+  font-family: var(--font-sans);
+  font-size: var(--text-label1-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+.text-label2 {
+  font-family: var(--font-sans);
+  font-size: var(--text-label2-size);
+  font-weight: var(--font-weight-regular);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+.text-caption {
+  font-family: var(--font-sans);
+  font-size: var(--text-caption-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.4;
+  letter-spacing: var(--tracking-kr);
+}
+/* === SPACING + LAYOUT (gen_spacing.py) === */
+:root,
+[data-theme="light"] {
+  /* spacing (4pt grid) */
+  --spacing-0: 0px;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-8: 8px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-20: 20px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px;
+  --spacing-64: 64px;
+
+  /* layout */
+  --layout-screen-margin: 16px;
+  --layout-card-margin: 18px;
+  --layout-gutter: 16px;
+  --layout-section-gap: 24px;
+  --layout-container-max: 1200px;
+
+  /* breakpoint (참조용 — @media엔 리터럴 px) */
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+}
+
+/* ---- elevation (shadow) — light defaults ---- */
+:root,
+[data-theme="light"] {
+  --shadow-xs: 0 1px 2px 0 rgba(14, 15, 26, 0.06);
+  --shadow-sm:
+    0 1px 2px 0 rgba(14, 15, 26, 0.06), 0 2px 6px -1px rgba(14, 15, 26, 0.08);
+  --shadow-md:
+    0 2px 4px -1px rgba(14, 15, 26, 0.07), 0 6px 14px -2px rgba(14, 15, 26, 0.1);
+  --shadow-lg:
+    0 4px 8px -2px rgba(14, 15, 26, 0.08),
+    0 12px 28px -4px rgba(14, 15, 26, 0.12);
+  --shadow-xl:
+    0 8px 16px -4px rgba(14, 15, 26, 0.1),
+    0 24px 56px -8px rgba(14, 15, 26, 0.18);
+  --elevation-card: var(--shadow-sm);
+  --elevation-dropdown: var(--shadow-md);
+  --elevation-popover: var(--shadow-lg);
+  --elevation-modal: var(--shadow-xl);
+  --elevation-toast: var(--shadow-lg);
+}
+[data-theme="dark"] {
+  --shadow-xs: 0 1px 2px 0 rgba(14, 15, 26, 0.32);
+  --shadow-sm:
+    0 1px 2px 0 rgba(14, 15, 26, 0.32), 0 2px 6px -1px rgba(14, 15, 26, 0.36);
+  --shadow-md:
+    0 2px 4px -1px rgba(14, 15, 26, 0.36),
+    0 6px 14px -2px rgba(14, 15, 26, 0.42);
+  --shadow-lg:
+    0 4px 8px -2px rgba(14, 15, 26, 0.4),
+    0 12px 28px -4px rgba(14, 15, 26, 0.48);
+  --shadow-xl:
+    0 8px 16px -4px rgba(14, 15, 26, 0.44),
+    0 24px 56px -8px rgba(14, 15, 26, 0.56);
+}
+
+/* ---- focus ring (keyboard) — WCAG 2.4.7 / 1.4.11 ---- */
+:root,
+[data-theme="light"] {
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-color: var(--color-border-focus);
+  --focus-ring-color-danger: var(--color-danger-solid);
+  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
+  --focus-ring-shadow:
+    0 0 0 var(--focus-ring-offset) var(--color-surface-default),
+    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width))
+      var(--focus-ring-color);
+}
+/* base: visible keyboard focus on interactive elements. :where() => 0 specificity (overridable) */
+:where(
+  a,
+  button,
+  input,
+  select,
+  textarea,
+  summary,
+  [tabindex],
+  [role="button"],
+  [role="tab"],
+  [role="link"],
+  [role="menuitem"],
+  [role="checkbox"],
+  [role="radio"],
+  [role="switch"]
+):focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+/* opt-in halo for colored buttons / chips / clipped corners */
+.focus-ring-shadow:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+.focus-ring-danger:focus-visible {
+  outline-color: var(--focus-ring-color-danger);
+}
+
+/* ---- component specs (dimensions: padding/gap/height/radius/icon/font) ---- */
+:root,
+[data-theme="light"] {
+  --comp-button-height: var(--spacing-40);
+  --comp-button-padding-x: var(--spacing-16);
+  --comp-button-gap: var(--spacing-8);
+  --comp-button-radius: var(--radius-xs);
+  --comp-button-icon: var(--spacing-20);
+  --comp-button-font: var(--text-button2-size);
+  --comp-button-border-width: 1px;
+  --comp-input-height: var(--spacing-40);
+  --comp-input-padding-x: var(--spacing-12);
+  --comp-input-gap: var(--spacing-8);
+  --comp-input-radius: var(--radius-xs);
+  --comp-input-icon: var(--spacing-20);
+  --comp-input-font: var(--text-body-size);
+  --comp-input-border-width: 1px;
+  --comp-card-padding: var(--spacing-20);
+  --comp-card-gap: var(--spacing-12);
+  --comp-card-radius: var(--radius-sm);
+  --comp-card-border-width: 1px;
+  --comp-label-padding-x: var(--spacing-8);
+  --comp-label-padding-y: var(--spacing-2);
+  --comp-label-gap: var(--spacing-4);
+  --comp-label-radius: var(--radius-full);
+  --comp-label-font: var(--text-caption-size);
+  --comp-checkbox-size: var(--spacing-20);
+  --comp-checkbox-radius: var(--radius-xs);
+  --comp-checkbox-border-width: 2px;
+  --comp-checkbox-icon: var(--spacing-12);
+  --comp-radio-size: var(--spacing-20);
+  --comp-radio-radius: var(--radius-full);
+  --comp-radio-border-width: 2px;
+  --comp-radio-dot: var(--spacing-8);
+  --comp-toggle-track-w: 44px;
+  --comp-toggle-track-h: var(--spacing-24);
+  --comp-toggle-thumb-size: var(--spacing-20);
+  --comp-toggle-padding: var(--spacing-2);
+  --comp-toggle-radius: var(--radius-full);
+  --comp-tooltip-padding-x: var(--spacing-8);
+  --comp-tooltip-padding-y: var(--spacing-4);
+  --comp-tooltip-radius: var(--radius-xs);
+  --comp-tooltip-arrow: 8px;
+  --comp-tooltip-font: var(--text-caption-size);
+  --comp-modal-padding: var(--spacing-24);
+  --comp-modal-padding-bottom: var(--spacing-16);
+  --comp-modal-gap: var(--spacing-16);
+  --comp-modal-radius: var(--radius-sm);
+  --comp-modal-border-width: 1px;
+  --comp-modal-min-width: 280px;
+  --comp-modal-max-width: 480px;
+  --comp-dropdown-padding: var(--spacing-4);
+  --comp-dropdown-item-padding-x: var(--spacing-12);
+  --comp-dropdown-item-padding-y: var(--spacing-8);
+  --comp-dropdown-gap: var(--spacing-8);
+  --comp-dropdown-radius: var(--radius-sm);
+  --comp-dropdown-item-radius: var(--radius-xs);
+  --comp-dropdown-min-width: 180px;
+  --comp-tabs-padding-x: var(--spacing-12);
+  --comp-tabs-padding-y: var(--spacing-8);
+  --comp-tabs-gap: var(--spacing-4);
+  --comp-tabs-indicator: 2px;
+  --comp-tabs-font: var(--text-label2-size);
+  --comp-table-cell-padding-x: var(--spacing-12);
+  --comp-table-cell-padding-y: var(--spacing-8);
+  --comp-table-radius: var(--radius-sm);
+  --comp-table-border-width: 1px;
+  --comp-table-header-font: var(--text-caption-size);
+  --comp-table-cell-font: var(--text-body-sm-size);
+  --comp-toast-padding-x: var(--spacing-16);
+  --comp-toast-padding-y: var(--spacing-16);
+  --comp-toast-gap: var(--spacing-8);
+  --comp-toast-radius: var(--radius-sm);
+  --comp-toast-font: var(--text-body-sm-size);
+  --comp-avatar-size: var(--spacing-32);
+  --comp-avatar-radius: var(--radius-full);
+  --comp-avatar-ring-width: 2px;
+  --comp-avatar-overlap: -8px;
+  --comp-avatar-font: var(--text-label2-size);
+  --comp-sheet-radius: var(--radius-lg);
+  --comp-sheet-padding-top: var(--spacing-16);
+  --comp-sheet-padding-x: var(--spacing-20);
+  --comp-sheet-padding-bottom: var(--spacing-24);
+  --comp-sheet-gap: var(--spacing-16);
+  --comp-sheet-handle-w: 40px;
+  --comp-sheet-handle-h: 4px;
+  --comp-select-height: var(--spacing-40);
+  --comp-select-padding-x: var(--spacing-12);
+  --comp-select-gap: var(--spacing-8);
+  --comp-select-radius: var(--radius-xs);
+  --comp-select-icon: var(--spacing-20);
+  --comp-select-font: var(--text-body-size);
+  --comp-select-border-width: 1px;
+  --comp-textarea-padding: var(--spacing-12);
+  --comp-textarea-radius: var(--radius-xs);
+  --comp-textarea-min-height: 80px;
+  --comp-textarea-font: var(--text-body-size);
+  --comp-textarea-border-width: 1px;
+  --comp-chip-height: var(--spacing-32);
+  --comp-chip-padding-x: var(--spacing-12);
+  --comp-chip-gap: var(--spacing-4);
+  --comp-chip-radius: var(--radius-xs);
+  --comp-chip-icon: var(--spacing-16);
+  --comp-chip-font: var(--text-label2-size);
+  --comp-chip-border-width: 1px;
+  --comp-alert-padding: var(--spacing-12);
+  --comp-alert-gap: var(--spacing-12);
+  --comp-alert-radius: var(--radius-sm);
+  --comp-alert-icon: var(--spacing-20);
+  --comp-alert-border-width: 1px;
+  --comp-pagination-item-size: var(--spacing-32);
+  --comp-pagination-gap: var(--spacing-4);
+  --comp-pagination-radius: var(--radius-sm);
+  --comp-pagination-font: var(--text-label2-size);
+  --comp-progress-height: 6px;
+  --comp-progress-radius: var(--radius-full);
+  --comp-skeleton-radius: var(--radius-sm);
+  --comp-segment-height: var(--spacing-32);
+  --comp-segment-padding: var(--spacing-2);
+  --comp-segment-radius: var(--radius-sm);
+  --comp-segment-thumb-radius: var(--radius-sm);
+  --comp-segment-font: var(--text-label2-size);
+}
+
+/* ---- icon (Lucide-base, currentColor) ---- */
+:root,
+[data-theme="light"] {
+  --icon-sm: 18px;
+  --icon-md: 20px;
+  --icon-lg: 24px;
+  --icon-grid: 24px;
+  --icon-stroke: 1.5px;
+}
+
+/* ---- P1 foundation: motion · z-index · border-width · touch ---- */
+:root,
+[data-theme="light"] {
+  /* motion */
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-out: cubic-bezier(0, 0, 0, 1);
+  --ease-in: cubic-bezier(0.3, 0, 1, 1);
+  /* z-index (stack order) */
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-overlay: 1200;
+  --z-modal: 1300;
+  --z-popover: 1400;
+  --z-toast: 1500;
+  --z-tooltip: 1600;
+  /* border-width */
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  /* touch target (hit area) */
+  --size-touch-min: 44px;
+  --size-avatar-xs: 24px;
+  --size-avatar-sm: 32px;
+  --size-avatar-md: 40px;
+  --size-avatar-lg: 48px;
+  --size-avatar-xl: 64px;
+}
+/* ⚠ 모션 토큰 수정 시 아래 @media 블록도 함께 확인할 것 — duration이 1ms로 덮어씌워진다 */
+/* 접근성: 모션 줄이기 켜면 트랜지션 사실상 즉시 */
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  [data-theme="light"] {
+    --duration-fast: 1ms;
+    --duration-base: 1ms;
+    --duration-slow: 1ms;
+  }
+}