:root {
  /* Content */
  --color-content-primary: var(--color-neutral-900);
  --color-content-secondary: var(--color-neutral-700);
  --color-content-tertiary: var(--color-neutral-600);
  --color-content-placeholder: var(--color-neutral-500);
  --color-content-disabled: var(--color-neutral-400);
  --color-content-inverse: var(--color-white);
  --color-content-link: var(--color-blue-600);
  --color-content-link-hover: var(--color-blue-700);

  /* Surface */
  --color-surface-default: var(--color-white);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-emphasis: var(--color-neutral-200);
  --color-surface-inverse: var(--color-neutral-900);
  --color-surface-disabled: var(--color-neutral-100);

  /* Border */
  --color-border-default: var(--color-neutral-200);
  --color-border-subtle: var(--color-neutral-100);
  --color-border-strong: var(--color-neutral-500);
  --color-border-inverse: var(--color-neutral-700);
  --color-border-focus: var(--color-blue-500);
  --color-border-disabled: var(--color-neutral-300);

  /* Action */
  --color-action-primary: var(--color-blue-600);
  --color-action-primary-hover: var(--color-blue-700);
  --color-action-primary-active: var(--color-blue-800);
  --color-action-primary-disabled: var(--color-blue-200);
  --color-action-secondary: var(--color-neutral-200);
  --color-action-secondary-hover: var(--color-neutral-300);
  --color-action-secondary-active: var(--color-neutral-400);
  --color-action-secondary-disabled: var(--color-neutral-300);
  --color-action-ghost: var(--color-transparent);
  --color-action-ghost-hover: var(--color-neutral-200);
  --color-action-ghost-active: var(--color-neutral-300);
  --color-action-danger: var(--color-red-600);
  --color-action-danger-hover: var(--color-red-700);
  --color-action-danger-active: var(--color-red-800);
  --color-action-success: var(--color-green-600);
  --color-action-success-hover: var(--color-green-700);
  --color-action-success-active: var(--color-green-800);

  /* Feedback */
  --color-feedback-success: var(--color-green-600);
  --color-feedback-success-surface: var(--color-green-50);
  --color-feedback-success-border: var(--color-green-200);
  --color-feedback-warning: var(--color-yellow-600);
  --color-feedback-warning-surface: var(--color-yellow-50);
  --color-feedback-warning-border: var(--color-yellow-200);
  --color-feedback-error: var(--color-red-600);
  --color-feedback-error-surface: var(--color-red-50);
  --color-feedback-error-border: var(--color-red-200);
  --color-feedback-info: var(--color-blue-600);
  --color-feedback-info-surface: var(--color-blue-50);
  --color-feedback-info-border: var(--color-blue-200);

  /* Icon */
  --color-icon-primary: var(--color-neutral-800);
  --color-icon-secondary: var(--color-neutral-600);
  --color-icon-tertiary: var(--color-neutral-500);
  --color-icon-disabled: var(--color-neutral-400);
  --color-icon-inverse: var(--color-white);
  --color-icon-brand: var(--color-blue-600);
  --color-icon-success: var(--color-green-600);
  --color-icon-warning: var(--color-yellow-600);
  --color-icon-danger: var(--color-red-600);

  /* Focus and overlay */
  --color-focus-ring: var(--color-blue-500);
  --color-overlay: rgb(0 0 0 / 0.5);
  --color-selection: var(--color-blue-100);

  /* Typography */
  --font-size-body-xs: var(--font-size-xs);
  --font-size-body-sm: var(--font-size-sm);
  --font-size-body-md: var(--font-size-md);
  --font-size-body-lg: var(--font-size-lg);
  --font-size-heading-sm: var(--font-size-lg);
  --font-size-heading-md: var(--font-size-xl);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-label: var(--font-weight-medium);
  --font-weight-heading: var(--font-weight-semibold);

  /* Layout */
  --space-component-xs: var(--space-1);
  --space-component-sm: var(--space-2);
  --space-component-md: var(--space-3);
  --space-component-lg: var(--space-4);
  --space-layout-sm: var(--space-4);
  --space-layout-md: var(--space-6);
  --space-layout-lg: var(--space-8);
  --space-layout-xl: var(--space-12);
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-dialog: var(--radius-xl);
  --shadow-control: var(--shadow-sm);
  --shadow-card: var(--shadow-md);
  --shadow-dialog: var(--shadow-xl);
}
