/* gency.ai 디자인 시스템 토큰 사본 - 젠시프레임 전 화면의 색 정본 (2026-09-23)

   출처: @studiolab-dev/design-system 0.2.0 generated/tokens.css
         (저장소 studiolab-dev/gency-frontend, packages/design-system)
   gency.ai 가 실제로 쓰는 값이다. 로그인한 gency.ai 대시보드와 편집기에서 뽑은 계산값
   (#0A8FF5 · #EEF0F2 · #181B1E …)이 전부 이 표 안에 있는 것을 대조했다.

   🔴 이 파일을 손으로 고치지 않는다. 패키지를 올리면 다시 복사한다.
   🔴 화면 CSS 는 hex 를 적지 않고 var(--color-*) · 의미 토큰만 쓴다.
      규칙과 대응표는 docs/DESIGN.md. */
/* ============================================================
   GENCY Design System v3.0 — Design Tokens
   Source of Truth: packages/design-system/tokens.raw.json
   Figma: https://figma.com/design/kMvquvWQL8763ifh88VfEd
   - Layer 1 (raw): primitive palette + units
   - Layer 2 (semantic): brand/intent aliases
   - Layer 3 (component): Light/Dark component tokens
   ============================================================ */

/* Pretendard @font-face 는 여기 두지 않는다 — 토큰 파일은 폰트 배포 채널이 아니다.
 *
 * 과거에 여기 9 weight 를 서브셋 없이 CDN 선언해 뒀다가, 이 파일이 앱의 첫
 * render-blocking 스타일시트로 들어가면서 랜딩에서 웹폰트 3.8 MB(weight 당 750~775 KB)를
 * 크리티컬 경로에서 받았다. 실측 결과 모바일 Lighthouse LCP 가 32 초까지 밀렸다.
 *
 * 폰트 로딩 전략은 각 앱이 정한다:
 *   apps/gency  → apps/gency/src/main.tsx  (첫 페인트 이후 Pretendard Variable 주입)
 *   apps/admin  → apps/admin/src/index.css
 * 신규 @font-face 를 이 파일에 추가하지 말 것. */

:root {
  /* ---------- Layer 1 · Raw Palette ---------- */
  --color-white: #ffffff;
  --color-black: #0a0d0f;

  --color-blue-50: #f5fbff;
  --color-blue-100: #f0f9ff;
  --color-blue-200: #e2f1fd;
  --color-blue-300: #dbedfd;
  --color-blue-400: #b9dcfc;
  --color-blue-500: #86baf6;
  --color-blue-600: #0a8ff5;
  --color-blue-700: #1281e7;
  --color-blue-750: #0d78ca;
  --color-blue-800: #1170d4;
  --color-blue-900: #0f5ec2;
  --color-blue-1000: #0a40a3;

  --color-purple-100: #f4e9fd;
  --color-purple-200: #e0c9fb;
  --color-purple-300: #cca4fa;
  --color-purple-400: #b77bf8;
  --color-purple-500: #a659f5;
  --color-purple-600: #9438eb;
  --color-purple-700: #8932e4;
  --color-purple-800: #7a28db;
  --color-purple-900: #6e21d3;
  --color-purple-1000: #5910c4;

  --color-green-100: #e1f5ea;
  --color-green-200: #b3e6c8;
  --color-green-300: #7dd4a0;
  --color-green-400: #3dc274;
  --color-green-500: #00c455;
  --color-green-600: #00bf40;
  --color-green-700: #00a336;
  --color-green-800: #00882c;
  --color-green-900: #006d22;
  --color-green-1000: #004f17;
  --color-green-d100: #152f22;

  --color-orange-100: #fbf2dc;
  --color-orange-200: #ffe0b2;
  --color-orange-300: #ffcc80;
  --color-orange-400: #ffb74d;
  --color-orange-500: #ffa726;
  --color-orange-600: #ff9200;
  --color-orange-700: #f57c00;
  --color-orange-800: #ef6c00;
  --color-orange-900: #e65100;
  --color-orange-1000: #bf360c;
  --color-orange-d100: #34291a;

  --color-red-100: #fbe8e8;
  --color-red-200: #ffd0d0;
  --color-red-300: #ffa8a8;
  --color-red-400: #ff7a7a;
  --color-red-500: #ff5e5e;
  --color-red-600: #ff4242;
  --color-red-700: #e63a3a;
  --color-red-800: #cc3333;
  --color-red-900: #b32b2b;
  --color-red-1000: #8f2020;
  --color-red-d100: #342022;
  --color-red-d200: #3d2124;
  --color-red-d300: #4f2427;

  --color-gray-100: #f9fafb;
  --color-gray-150: #f6f6f8;
  --color-gray-200: #eef0f2;
  --color-gray-300: #dadfe2;
  --color-gray-400: #c6cdd2;
  --color-gray-500: #8796a1;
  --color-gray-600: #5b6973;
  --color-gray-700: #3d464e;
  --color-gray-800: #242a2e;
  --color-gray-900: #181b1e;
  --color-gray-1000: #121416;

  /* ---------- Layer 2 · Semantic Aliases ---------- */
  --color-foundations-white: var(--color-white);
  --color-foundations-black: var(--color-black);

  --color-primary-50: var(--color-blue-50);
  --color-primary-100: var(--color-blue-100);
  --color-primary-200: var(--color-blue-200);
  --color-primary-300: var(--color-blue-300);
  --color-primary-400: var(--color-blue-400);
  --color-primary-500: var(--color-blue-500);
  --color-primary-600: var(--color-blue-600);
  --color-primary-700: var(--color-blue-700);
  --color-primary-750: var(--color-blue-750);
  --color-primary-800: var(--color-blue-800);
  --color-primary-900: var(--color-blue-900);
  --color-primary-1000: var(--color-blue-1000);

  --color-secondary-100: var(--color-purple-100);
  --color-secondary-200: var(--color-purple-200);
  --color-secondary-300: var(--color-purple-300);
  --color-secondary-400: var(--color-purple-400);
  --color-secondary-500: var(--color-purple-500);
  --color-secondary-600: var(--color-purple-600);
  --color-secondary-700: var(--color-purple-700);
  --color-secondary-800: var(--color-purple-800);
  --color-secondary-900: var(--color-purple-900);
  --color-secondary-1000: var(--color-purple-1000);

  --color-neutral-100: var(--color-gray-100);
  --color-neutral-150: var(--color-gray-150);
  --color-neutral-200: var(--color-gray-200);
  --color-neutral-300: var(--color-gray-300);
  --color-neutral-400: var(--color-gray-400);
  --color-neutral-500: var(--color-gray-500);
  --color-neutral-600: var(--color-gray-600);
  --color-neutral-700: var(--color-gray-700);
  --color-neutral-800: var(--color-gray-800);
  --color-neutral-900: var(--color-gray-900);
  --color-neutral-1000: var(--color-gray-1000);

  --color-success-100: var(--color-green-100);
  --color-success-200: var(--color-green-200);
  --color-success-300: var(--color-green-300);
  --color-success-400: var(--color-green-400);
  --color-success-500: var(--color-green-500);
  --color-success-600: var(--color-green-600);
  --color-success-700: var(--color-green-700);
  --color-success-800: var(--color-green-800);
  --color-success-900: var(--color-green-900);
  --color-success-1000: var(--color-green-1000);
  --color-success-d100: var(--color-green-d100);

  --color-error-100: var(--color-red-100);
  --color-error-200: var(--color-red-200);
  --color-error-300: var(--color-red-300);
  --color-error-400: var(--color-red-400);
  --color-error-500: var(--color-red-500);
  --color-error-600: var(--color-red-600);
  --color-error-700: var(--color-red-700);
  --color-error-800: var(--color-red-800);
  --color-error-900: var(--color-red-900);
  --color-error-1000: var(--color-red-1000);
  --color-error-d100: var(--color-red-d100);
  --color-error-d200: var(--color-red-d200);
  --color-error-d300: var(--color-red-d300);

  --color-warning-100: var(--color-orange-100);
  --color-warning-200: var(--color-orange-200);
  --color-warning-300: var(--color-orange-300);
  --color-warning-400: var(--color-orange-400);
  --color-warning-500: var(--color-orange-500);
  --color-warning-600: var(--color-orange-600);
  --color-warning-700: var(--color-orange-700);
  --color-warning-800: var(--color-orange-800);
  --color-warning-900: var(--color-orange-900);
  --color-warning-1000: var(--color-orange-1000);
  --color-warning-d100: var(--color-orange-d100);

  /* ============================================================
     Layer 3 · Component Tokens · Light mode
     SoT: Component/Light in tokens.raw.json
     ============================================================ */

  /* surface */
  --surface-primary-normal: var(--color-primary-600);
  --surface-primary-strong: var(--color-primary-750);
  --surface-primary-heavy: var(--color-primary-900);
  --surface-secondary-normal: var(--color-primary-300);
  --surface-secondary-strong: var(--color-primary-400);
  --surface-secondary-heavy: var(--color-primary-500);
  --surface-tertiary-normal: var(--color-foundations-white);
  --surface-tertiary-strong: var(--color-primary-50);
  --surface-tertiary-pressed: var(--color-primary-100);
  --surface-neutral-normal: var(--color-foundations-white);
  --surface-neutral-strong: var(--color-neutral-100);
  --surface-neutral-heavy: var(--color-neutral-150);
  --surface-overlay-normal: var(--color-foundations-white);
  --surface-gray-normal: var(--color-neutral-200);
  --surface-gray-strong: var(--color-neutral-300);
  --surface-gray-heavy: var(--color-neutral-400);
  --surface-dark-normal: var(--color-neutral-600);
  --surface-dark-strong: var(--color-neutral-700);
  --surface-dark-heavy: var(--color-neutral-800);
  --surface-disabled-normal: var(--color-neutral-100);
  --surface-disabled-strong: var(--color-neutral-200);
  --surface-disabled-pressed: var(--color-neutral-300);
  --surface-error-subtle-normal: var(--color-error-100);
  /* NOTE: Figma 원본 오타 'subtle-stong' 보존 (MIGRATION.md 참조) */
  --surface-error-subtle-stong: var(--color-error-200);
  --surface-error-subtle-heavy: var(--color-error-300);
  --surface-error-normal: var(--color-error-600);
  --surface-error-strong: var(--color-error-700);
  --surface-error-heavy: var(--color-error-800);
  --surface-success-subtle-normal: var(--color-success-100);
  --surface-success-subtle-strong: var(--color-success-200);
  --surface-success-subtle-heavy: var(--color-success-300);
  --surface-success-normal: var(--color-success-600);
  --surface-success-strong: var(--color-success-700);
  --surface-success-heavy: var(--color-success-800);
  --surface-warning-subtle-normal: var(--color-warning-100);
  --surface-warning-subtle-strong: var(--color-warning-200);
  --surface-warning-subtle-heavy: var(--color-warning-300);
  --surface-warning-normal: var(--color-warning-600);
  --surface-warning-strong: var(--color-warning-700);
  --surface-warning-heavy: var(--color-warning-800);

  /* text */
  --text-default-hero: var(--color-neutral-900);
  --text-default-heading: var(--color-neutral-700);
  --text-default-body1: var(--color-neutral-600);
  --text-default-body2: var(--color-neutral-500);
  --text-default-caption: var(--color-neutral-500);
  --text-default-placeholder: var(--color-neutral-400);
  --text-primary-normal: var(--color-primary-600);
  --text-primary-strong: var(--color-primary-700);
  --text-primary-heavy: var(--color-primary-750);
  --text-secondary-normal: var(--color-secondary-600);
  --text-secondary-strong: var(--color-secondary-700);
  --text-secondary-heavy: var(--color-secondary-800);
  --text-on-color-hero: var(--color-foundations-white);
  --text-on-color-heading: var(--color-neutral-200);
  --text-on-color-body: var(--color-neutral-300);
  --text-on-color-caption: var(--color-neutral-500);
  --text-on-color-placeholder: var(--color-neutral-600);
  --text-on-color-dark: var(--color-foundations-black);
  --text-disabled-normal: var(--color-neutral-300);
  --text-disabled-strong: var(--color-neutral-400);
  --text-disabled-heavy: var(--color-neutral-500);
  --text-error-normal: var(--color-error-600);
  --text-error-strong: var(--color-error-700);
  --text-error-heavy: var(--color-error-800);
  --text-success-normal: var(--color-success-600);
  --text-success-strong: var(--color-success-700);
  --text-success-heavy: var(--color-success-800);
  --text-warning-normal: var(--color-warning-600);
  --text-warning-strong: var(--color-warning-700);
  --text-warning-heavy: var(--color-warning-800);

  /* icon */
  --icon-default-hero: var(--color-neutral-900);
  --icon-default-heading: var(--color-neutral-700);
  --icon-default-body1: var(--color-neutral-600);
  --icon-default-body2: var(--color-neutral-500);
  --icon-default-caption: var(--color-neutral-400);
  --icon-default-placeholder: var(--color-neutral-400);
  --icon-primary-normal: var(--color-primary-600);
  --icon-primary-strong: var(--color-primary-700);
  --icon-primary-heavy: var(--color-primary-750);
  --icon-secondary-normal: var(--color-secondary-600);
  --icon-secondary-strong: var(--color-secondary-700);
  --icon-secondary-heavy: var(--color-secondary-800);
  --icon-on-color-hero: var(--color-foundations-white);
  --icon-on-color-heading: var(--color-neutral-200);
  --icon-on-color-body: var(--color-neutral-300);
  --icon-on-color-caption: var(--color-neutral-500);
  --icon-on-color-placeholder: var(--color-neutral-600);
  --icon-on-color-dark: var(--color-foundations-black);
  --icon-disabled-normal: var(--color-neutral-300);
  --icon-disabled-strong: var(--color-neutral-400);
  --icon-disabled-pressed: var(--color-neutral-500);
  --icon-error-normal: var(--color-error-600);
  --icon-error-strong: var(--color-error-700);
  --icon-error-heavy: var(--color-error-800);
  --icon-success-normal: var(--color-success-600);
  --icon-success-strong: var(--color-success-700);
  --icon-success-pressed: var(--color-success-800);
  --icon-warning-normal: var(--color-warning-600);
  --icon-warning-strong: var(--color-warning-700);
  --icon-warning-heavy: var(--color-warning-800);

  /* border */
  --border-on-color: var(--color-foundations-white);
  --border-default-normal: rgba(218, 223, 226, 0.4);
  --border-default-strong: rgba(218, 223, 226, 0.6);
  --border-default-heavy: rgba(218, 223, 226, 0.8);
  --border-default-root: var(--color-neutral-400);
  --border-neutral-normal: var(--color-neutral-200);
  --border-neutral-strong: var(--color-neutral-300);
  --border-neutral-heavy: var(--color-neutral-400);
  --border-primary-normal: var(--color-primary-600);
  --border-primary-strong: var(--color-primary-700);
  --border-primary-heavy: var(--color-primary-750);
  --border-secondary-normal: var(--color-secondary-600);
  --border-secondary-strong: var(--color-secondary-700);
  --border-secondary-heavy: var(--color-secondary-800);
  --border-error-normal: var(--color-error-600);
  --border-error-strong: var(--color-error-700);
  --border-error-heavy: var(--color-error-800);
  --border-disabled-normal: var(--color-neutral-300);

  /* background */
  --background-normal: var(--color-foundations-white);
  --background-alternative: var(--color-neutral-200);

  /* overlay fill (alpha only) */
  --fill-normal: rgba(238, 240, 242, 0.4);
  --fill-strong: rgba(238, 240, 242, 0.6);
  --fill-heavy: rgba(238, 240, 242, 0.8);

  /* dim (modal/overlay mask — alpha) */
  --dim-light: rgba(24, 27, 30, 0.08);
  --dim-normal: rgba(24, 27, 30, 0.3);
  --dim-strong: rgba(24, 27, 30, 0.5);

  /* gradients (Light) */
  --gradient-signature-start: var(--color-primary-600);
  --gradient-signature-end: var(--color-secondary-400);
  --gradient-light-start: var(--color-foundations-white);
  --gradient-light-end: #03e2ff;
  --gradient-dark-start: #03c4ff;
  --gradient-dark-end: #0a40a3;
  --gradient-gray-start: var(--color-foundations-white);
  --gradient-gray-end: var(--color-neutral-300);

  --gradient-signature: linear-gradient(135deg, var(--gradient-signature-start), var(--gradient-signature-end));
  --gradient-light: linear-gradient(135deg, var(--gradient-light-start), var(--gradient-light-end));
  --gradient-dark: linear-gradient(135deg, var(--gradient-dark-start), var(--gradient-dark-end));
  --gradient-gray: linear-gradient(135deg, var(--gradient-gray-start), var(--gradient-gray-end));

  /* ---------- Typography · Family ---------- */
  /* Variable 을 먼저 둔다 — 각 앱이 첫 페인트 이후 주입하는 face 가 'Pretendard Variable' 이다.
   * 주입 전에는 뒤쪽 시스템 폰트로 그려지고, 로드되면 swap 된다. */
  --font-family-primary: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ---------- Typography · Sizes (desktop) ----------
     Mobile mode는 Figma에 별도 Variable 없음 → title1/2/hero는 clamp() 근사.
  */
  --font-size-hero: clamp(32px, 4vw + 12px, 50px);
  --font-size-title1: clamp(28px, 3vw + 12px, 40px);
  --font-size-title2: clamp(24px, 2vw + 12px, 32px);
  --font-size-title3: 24px;
  --font-size-title4: 20px;
  --font-size-subtitle1: 18px;
  --font-size-subtitle2: 16px;
  --font-size-body1: 20px;
  --font-size-body2: 18px;
  --font-size-body3: 16px;
  --font-size-body4: 14px;
  --font-size-button1: 16px;
  --font-size-button2: 14px;
  --font-size-button3: 12px;
  --font-size-link: 14px;
  --font-size-caption1: 12px;
  --font-size-caption2: 11px;

  --font-line-hero: clamp(40px, 5vw + 16px, 70px);
  --font-line-title1: clamp(38px, 4vw + 16px, 60px);
  --font-line-title2: clamp(32px, 3vw + 14px, 48px);
  --font-line-title3: 36px;
  --font-line-title4: 30px;
  --font-line-subtitle1: 28px;
  --font-line-subtitle2: 24px;
  --font-line-body1: 30px;
  --font-line-body2: 28px;
  --font-line-body3: 24px;
  --font-line-body4: 22px;
  --font-line-button1: 24px;
  --font-line-button2: 22px;
  --font-line-button3: 20px;
  --font-line-link: 22px;
  --font-line-caption1: 16px;
  --font-line-caption2: 16px;

  --font-tracking-hero: -2px;
  --font-tracking-default: 0.25px;

  /* ---------- Spacing (Figma unit/* full set) ---------- */
  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-96: 96px;
  --space-128: 128px;
  --space-256: 256px;
  --space-512: 512px;
  --space-1024: 1024px;

  /* ---------- Border Radius ---------- */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-32: 32px;
  --radius-full: 1024px;

  /* ---------- Border Width ---------- */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;

  /* ---------- Icon Sizes ---------- */
  --icon-size-xsmall: 16px;
  --icon-size-small: 18px;
  --icon-size-medium: 20px;
  --icon-size-large: 22px;
  --icon-size-xlarge: 24px;

  /* ---------- Elevation ---------- */
  --elevation-color: rgba(91, 105, 115, 0.16);
  --elevation-blur-2: 2px;
  --elevation-blur-4: 4px;
  --elevation-blur-8: 8px;
  --elevation-blur-16: 16px;
  --elevation-blur-32: 32px;

  /* composed shadows — offset·spread은 Figma Variable 외부.
     디자이너 Effect Style 확정 시 MIGRATION.md ⏳ 제거 후 갱신 */
  --shadow-elevation-1: 0 1px 2px 0 var(--elevation-color);
  --shadow-elevation-2: 0 2px 4px 0 var(--elevation-color);
  --shadow-elevation-3: 0 4px 8px 0 var(--elevation-color);
  --shadow-elevation-4: 0 8px 16px 0 var(--elevation-color);
  --shadow-elevation-5: 0 16px 32px 0 var(--elevation-color);
}

/* ============================================================
   Dark mode overrides
   SoT: Component/Dark + Gradient/Dark in tokens.raw.json
   Trigger: `[data-theme="dark"]` (design-system ThemeProvider)
   또는 `.dark` 클래스 (기존 apps 호환)
   ============================================================ */
[data-theme='dark'],
.dark {
  /* surface */
  --surface-primary-normal: var(--color-primary-600);
  --surface-primary-strong: var(--color-primary-750);
  --surface-primary-heavy: var(--color-primary-800);
  --surface-secondary-normal: var(--color-primary-1000);
  --surface-secondary-strong: var(--color-primary-900);
  --surface-secondary-heavy: var(--color-primary-800);
  --surface-tertiary-normal: var(--color-neutral-900);
  --surface-tertiary-strong: var(--color-neutral-800);
  --surface-tertiary-pressed: var(--color-neutral-700);
  --surface-neutral-normal: var(--color-neutral-900);
  --surface-neutral-strong: var(--color-neutral-800);
  --surface-neutral-heavy: var(--color-neutral-700);
  --surface-overlay-normal: var(--color-neutral-800);
  --surface-gray-normal: var(--color-neutral-800);
  --surface-gray-strong: var(--color-neutral-700);
  --surface-gray-heavy: var(--color-neutral-600);
  --surface-dark-normal: var(--color-neutral-800);
  --surface-dark-strong: var(--color-neutral-700);
  --surface-dark-heavy: var(--color-neutral-600);
  --surface-disabled-normal: var(--color-neutral-800);
  --surface-disabled-strong: var(--color-neutral-700);
  --surface-disabled-pressed: var(--color-neutral-600);
  --surface-error-subtle-normal: var(--color-error-d100);
  --surface-error-subtle-stong: var(--color-error-d200);
  --surface-error-subtle-heavy: var(--color-error-d300);
  --surface-success-subtle-normal: var(--color-success-d100);
  --surface-warning-subtle-normal: var(--color-warning-d100);
  --surface-warning-normal: var(--color-warning-400);
  --surface-warning-strong: var(--color-warning-500);
  --surface-warning-heavy: var(--color-warning-600);

  /* text */
  --text-default-hero: var(--color-neutral-100);
  --text-default-heading: var(--color-neutral-200);
  --text-default-body1: var(--color-neutral-300);
  --text-default-body2: var(--color-neutral-400);
  --text-default-caption: var(--color-neutral-500);
  --text-default-placeholder: var(--color-neutral-600);
  --text-primary-normal: var(--color-primary-600);
  --text-primary-strong: var(--color-primary-500);
  --text-primary-heavy: var(--color-primary-400);
  --text-secondary-normal: var(--color-secondary-600);
  --text-secondary-strong: var(--color-secondary-500);
  --text-secondary-heavy: var(--color-secondary-400);
  --text-disabled-normal: var(--color-neutral-700);
  --text-disabled-strong: var(--color-neutral-600);
  --text-disabled-heavy: var(--color-neutral-500);
  --text-error-normal: var(--color-error-600);
  --text-error-strong: var(--color-error-500);
  --text-error-heavy: var(--color-error-400);
  --text-success-normal: var(--color-success-600);
  --text-success-strong: var(--color-success-500);
  --text-success-heavy: var(--color-success-400);
  --text-warning-normal: var(--color-warning-600);
  --text-warning-strong: var(--color-warning-500);
  --text-warning-heavy: var(--color-warning-400);

  /* icon */
  --icon-default-hero: var(--color-neutral-100);
  --icon-default-heading: var(--color-neutral-200);
  --icon-default-body1: var(--color-neutral-300);
  --icon-default-body2: var(--color-neutral-400);
  --icon-default-caption: var(--color-neutral-500);
  --icon-default-placeholder: var(--color-neutral-600);
  --icon-primary-normal: var(--color-primary-600);
  --icon-primary-strong: var(--color-primary-500);
  --icon-primary-heavy: var(--color-primary-400);
  --icon-secondary-normal: var(--color-secondary-200);
  --icon-secondary-strong: var(--color-secondary-300);
  --icon-secondary-heavy: var(--color-secondary-400);
  --icon-disabled-normal: var(--color-neutral-700);
  --icon-disabled-strong: var(--color-neutral-600);
  --icon-disabled-pressed: var(--color-neutral-500);
  --icon-error-normal: var(--color-error-200);
  --icon-error-strong: var(--color-error-300);
  --icon-error-heavy: var(--color-error-400);
  --icon-success-normal: var(--color-success-200);
  --icon-success-strong: var(--color-success-300);
  --icon-success-pressed: var(--color-success-400);
  --icon-warning-normal: var(--color-warning-200);
  --icon-warning-strong: var(--color-warning-300);
  --icon-warning-heavy: var(--color-warning-400);

  /* border */
  --border-default-normal: rgba(255, 255, 255, 0.2);
  --border-default-strong: rgba(255, 255, 255, 0.4);
  --border-default-heavy: rgba(255, 255, 255, 0.6);
  --border-default-root: var(--color-neutral-700);
  --border-neutral-normal: var(--color-neutral-800);
  --border-neutral-strong: var(--color-neutral-700);
  --border-neutral-heavy: var(--color-neutral-600);
  --border-primary-normal: var(--color-primary-600);
  --border-primary-strong: var(--color-primary-500);
  --border-primary-heavy: var(--color-primary-400);
  --border-secondary-normal: var(--color-secondary-200);
  --border-secondary-strong: var(--color-secondary-300);
  --border-secondary-heavy: var(--color-secondary-400);
  --border-error-normal: var(--color-error-600);
  --border-error-strong: var(--color-error-500);
  --border-error-heavy: var(--color-error-400);
  --border-disabled-normal: var(--color-neutral-800);

  /* background */
  --background-normal: var(--color-neutral-900);
  --background-alternative: var(--color-foundations-black);

  /* overlay fill / dim */
  --fill-normal: rgba(255, 255, 255, 0.08);
  --fill-strong: rgba(255, 255, 255, 0.12);
  --fill-heavy: rgba(255, 255, 255, 0.18);
  --dim-light: rgba(24, 27, 30, 0.4);
  --dim-normal: rgba(24, 27, 30, 0.6);
  --dim-strong: rgba(24, 27, 30, 0.7);

  /* elevation */
  --elevation-color: rgba(0, 0, 0, 0.16);

  /* gradients (Dark: light gradient 반전, 나머지는 동일) */
  --gradient-light-start: #03c4ff;
  --gradient-light-end: #0a40a3;
  --gradient-light: linear-gradient(135deg, var(--gradient-light-start), var(--gradient-light-end));

  --border-on-color: var(--color-foundations-white);
}