:root {
  /* Radius — flat */
  --radius-small: var(--radius-none);
  --radius-medium: var(--radius-none);
  --radius-large: var(--radius-none);
  --radius-base: var(--radius-none);

  /* Surface */
  --color-bg-surface-default: var(--color-white);
  --color-bg-surface-alt: var(--color-zinc-50);
  --color-bg-surface-muted: var(--color-zinc-100);
  --color-bg-surface-accent: var(--color-zinc-200);
  --color-bg-surface-floating: var(--color-zinc-50);
  --color-bg-overlay-default: var(--color-alpha-black-50a);

  /* Font — primary/secondary/muted */
  --font-color-primary-default: var(--color-neutral-900);
  --font-color-secondary-default: var(--color-neutral-500);
  --font-color-primary-muted: var(--color-zinc-500);
  --font-color-disabled: var(--color-zinc-400);
  --font-color-inverse-default: var(--color-white);

  /* Onbrand — Primary(#CE6533) 위 흰색 텍스트 */
  --font-color-onbrand-default: var(--color-white);
  --font-color-onbrand-hover: var(--color-neutral-200);
  --font-color-onbrand-active: var(--color-white);

  /* Icon */
  --icon-color-primary-default: var(--color-theme-primary-100);
  --icon-color-primary-muted: var(--color-zinc-400);
  --icon-color-secondary-default: var(--color-theme-secondary-100);
  --icon-color-onbrand-default: var(--color-white);
  --icon-color-onbrand-hover: var(--color-white);
  --icon-color-onbrand-active: var(--color-neutral-200);
  --icon-color-inverse-default: var(--color-black);
  --icon-color-disabled: var(--color-zinc-400);

  /* Border */
  --border-color-default: var(--color-zinc-200);
  --border-color-divider: var(--color-neutral-200);
  --border-color-focus: var(--color-neutral-500);
  --border-color-primary-default: var(--color-theme-primary-100);
  --border-color-primary-hover: var(--color-theme-primary-200);
  --border-color-secondary-default: var(--color-theme-secondary-100);
  --border-color-secondary-hover: var(--color-theme-secondary-200);
  --border-color-surface: var(--color-zinc-400);

  /* Brand bg */
  --color-bg-primary-default: var(--color-theme-primary-100);
  --color-bg-primary-hover: var(--color-theme-primary-200);
  --color-bg-primary-muted: var(--color-theme-primary-100-a10);
  --color-bg-secondary-default: var(--color-theme-secondary-100);
  --color-bg-secondary-hover: var(--color-theme-secondary-200);
  --color-bg-secondary-muted: var(--color-theme-secondary-100-a10);
  --color-bg-accent-default: var(--color-theme-accent-100);
  --color-bg-accent-hover: var(--color-theme-accent-200);
  --color-bg-accent-muted: var(--color-theme-accent-100-a10);
  --color-bg-disabled: var(--color-zinc-200);

  /* Link — Secondary(Brand Teal #387085) 사용 */
  --font-color-link-default: var(--color-bg-secondary-default);
  --font-color-link-hover: var(--color-bg-secondary-hover);
  --icon-color-link-default: var(--color-bg-secondary-default);
  --icon-color-link-hover: var(--color-bg-secondary-hover);

  /* Shadow */
  --effect-shadow-level-1: var(--color-alpha-black-5a);
  --effect-shadow-level-2: var(--color-alpha-black-10a);
  --effect-shadow-level-3: var(--color-alpha-black-30a);
  --effect-shadow-overlay: var(--color-alpha-black-50a);
  --effect-shadow-inset: var(--color-alpha-black-5a);

  /* Gradient */
  --color-gradient-primary-start: var(--color-theme-primary-100);
  --color-gradient-primary-end: var(--color-theme-secondary-100);
  --color-gradient-secondary-start: var(--color-theme-accent-100);
  --color-gradient-secondary-end: var(--color-theme-secondary-100);
  --color-gradient-primary-hover-start: var(--color-theme-primary-200);
  --color-gradient-primary-hover-end: var(--color-theme-secondary-200);

  /* Progress */
  --color-progress-track: var(--color-zinc-200);
  --color-progress-fill: var(--color-theme-primary-100);

  /* Chart */
  --color-chart-data-vis-brand-1: var(--color-theme-primary-100);
  --color-chart-data-vis-brand-2: var(--color-theme-secondary-100);
  --color-chart-data-vis-brand-3: var(--color-theme-accent-100);
  --color-chart-bg-container: var(--color-neutral-100);
  --color-chart-border-grid: var(--color-zinc-200);
  --color-chart-text-axis-label: var(--color-zinc-500);
  --color-chart-text-data-value: var(--color-zinc-950);
  --color-chart-text-data-value-sub: var(--color-zinc-500);
  --color-chart-border-axis: var(--color-zinc-300);
  --color-chart-control-range-track: var(--color-white);
  --color-chart-control-range-fill: var(--color-blue-50);
  --color-chart-control-handle: var(--color-white);
  --color-chart-control-border: var(--color-neutral-300);
  --color-chart-control-thumb: var(--color-blue-400);
  --color-chart-foreground: var(--color-white);
  --color-chart-control-thumb-subtle: var(--color-blue-300);
}

.dark {
  /* Radius — flat */
  --radius-small: var(--radius-none);
  --radius-medium: var(--radius-none);
  --radius-large: var(--radius-none);
  --radius-base: var(--radius-none);

  /* Surface */
  --color-bg-surface-default: var(--color-zinc-950);
  --color-bg-surface-alt: var(--color-zinc-800);
  --color-bg-surface-muted: var(--color-zinc-900);
  --color-bg-surface-accent: var(--color-zinc-700);
  --color-bg-surface-floating: var(--color-zinc-700);
  --color-bg-overlay-default: var(--color-alpha-black-50a);

  /* Font — primary/secondary/muted */
  --font-color-primary-default: var(--color-white);
  --font-color-secondary-default: var(--color-neutral-500);
  --font-color-primary-muted: var(--color-zinc-400);
  --font-color-disabled: var(--color-zinc-500);
  --font-color-inverse-default: var(--color-white);

  /* Onbrand — Primary(#CE6533)는 모드 불문 동일, 흰색 유지 */
  --font-color-onbrand-default: var(--color-white);
  --font-color-onbrand-hover: var(--color-neutral-200);
  --font-color-onbrand-active: var(--color-white);

  /* Icon */
  --icon-color-primary-default: var(--color-theme-primary-100);
  --icon-color-primary-muted: var(--color-zinc-400);
  --icon-color-secondary-default: var(--color-theme-secondary-100);
  --icon-color-onbrand-default: var(--color-white);
  --icon-color-onbrand-hover: var(--color-white);
  --icon-color-onbrand-active: var(--color-neutral-200);
  --icon-color-inverse-default: var(--color-white);
  --icon-color-disabled: var(--color-zinc-500);

  /* Border */
  --border-color-default: var(--color-zinc-700);
  --border-color-divider: var(--color-neutral-200);
  --border-color-focus: var(--color-neutral-500);
  --border-color-primary-default: var(--color-theme-primary-100);
  --border-color-primary-hover: var(--color-theme-primary-200);
  --border-color-secondary-default: var(--color-theme-secondary-100);
  --border-color-secondary-hover: var(--color-theme-secondary-200);
  --border-color-surface: var(--color-zinc-400);

  /* Brand bg */
  --color-bg-primary-default: var(--color-theme-primary-100);
  --color-bg-primary-hover: var(--color-theme-primary-200);
  --color-bg-primary-muted: var(--color-theme-primary-100-a10);
  --color-bg-secondary-default: var(--color-theme-secondary-100);
  --color-bg-secondary-hover: var(--color-theme-secondary-200);
  --color-bg-secondary-muted: var(--color-theme-secondary-100-a10);
  --color-bg-accent-default: var(--color-theme-accent-100);
  --color-bg-accent-hover: var(--color-theme-accent-200);
  --color-bg-accent-muted: var(--color-theme-accent-100-a10);
  --color-bg-disabled: var(--color-zinc-800);

  /* Link — 다크모드에서는 Primary(오렌지) 사용 (틸은 어두운 배경에서 가시성 부족) */
  --font-color-link-default: var(--color-bg-primary-default);
  --font-color-link-hover: var(--color-bg-primary-hover);
  --icon-color-link-default: var(--color-bg-primary-default);
  --icon-color-link-hover: var(--color-bg-primary-hover);

  /* Shadow */
  --effect-shadow-level-1: var(--color-alpha-white-5a);
  --effect-shadow-level-2: var(--color-alpha-white-10a);
  --effect-shadow-level-3: var(--color-alpha-white-30a);
  --effect-shadow-overlay: var(--color-alpha-black-50a);
  --effect-shadow-inset: var(--color-alpha-black-5a);

  /* Gradient */
  --color-gradient-primary-start: var(--color-theme-primary-100);
  --color-gradient-primary-end: var(--color-theme-secondary-100);
  --color-gradient-secondary-start: var(--color-theme-accent-100);
  --color-gradient-secondary-end: var(--color-theme-secondary-100);
  --color-gradient-primary-hover-start: var(--color-theme-primary-200);
  --color-gradient-primary-hover-end: var(--color-theme-secondary-200);

  /* Progress */
  --color-progress-track: var(--color-zinc-700);
  --color-progress-fill: var(--color-theme-primary-100);

  /* Chart */
  --color-chart-data-vis-brand-1: var(--color-theme-primary-100);
  --color-chart-data-vis-brand-2: var(--color-theme-secondary-100);
  --color-chart-data-vis-brand-3: var(--color-theme-accent-100);
  --color-chart-bg-container: var(--color-neutral-100);
  --color-chart-border-grid: rgba(255, 255, 255, 0.1);
  --color-chart-text-axis-label: var(--color-zinc-400);
  --color-chart-text-data-value: var(--color-zinc-50);
  --color-chart-text-data-value-sub: var(--color-zinc-400);
  --color-chart-border-axis: rgba(255, 255, 255, 0.15);
  --color-chart-control-range-track: var(--color-white);
  --color-chart-control-range-fill: var(--color-blue-50);
  --color-chart-control-handle: var(--color-white);
  --color-chart-control-border: var(--color-neutral-300);
  --color-chart-control-thumb: var(--color-blue-400);
  --color-chart-foreground: var(--color-black);
  --color-chart-control-thumb-subtle: var(--color-blue-300);

  /* State subtle — 다크모드 보정 */
  --color-state-success-subtle: var(--color-emerald-950);
  --color-state-error-subtle: var(--color-red-950);
  --color-state-info-subtle: var(--color-blue-950);
}