:root {
  /**
   * Neutral Colors
   * Professional slate palette for base design
   */
  --color-neutral-surface: var(--color-white);
  --color-neutral-surface-subtle: var(--color-slate-50);
  --color-neutral-surface-strong: var(--color-slate-100);
  --color-neutral-surface-inverted: var(--color-slate-900);
  --color-neutral-surface-hover: var(--color-slate-100);

  --color-neutral-content: var(--color-slate-900);
  --color-neutral-content-subtle: var(--color-slate-600);
  --color-neutral-content-muted: var(--color-slate-400);
  --color-neutral-content-inverted: var(--color-white);
  --color-neutral-content-disabled: var(--color-slate-300);

  --color-neutral-stroke: var(--color-slate-200);
  --color-neutral-stroke-subtle: var(--color-slate-100);
  --color-neutral-stroke-strong: var(--color-slate-300);
  --color-neutral-stroke-hover: var(--color-slate-300);

  /**
   * Primary Colors
   * Blue-600 as the primary accent
   */
  --color-primary-surface: var(--color-blue-600);
  --color-primary-surface-subtle: var(--color-blue-50);
  --color-primary-surface-strong: var(--color-blue-700);
  --color-primary-surface-hover: var(--color-blue-700);
  --color-primary-surface-disabled: var(--color-blue-100);

  --color-primary-content: var(--color-blue-600);
  --color-primary-content-subtle: var(--color-blue-400);
  --color-primary-content-muted: var(--color-blue-300);
  --color-primary-content-inverted: var(--color-white);
  --color-primary-content-disabled: var(--color-blue-200);

  --color-primary-stroke: var(--color-blue-200);
  --color-primary-stroke-subtle: var(--color-blue-100);
  --color-primary-stroke-strong: var(--color-blue-300);
  --color-primary-stroke-hover: var(--color-blue-300);

  /**
   * Secondary Colors
   * Darker slate for secondary elements
   */
  --color-secondary-surface: var(--color-slate-700);
  --color-secondary-surface-subtle: var(--color-slate-50);
  --color-secondary-surface-strong: var(--color-slate-800);
  --color-secondary-surface-hover: var(--color-slate-600);
  --color-secondary-surface-disabled: var(--color-slate-100);

  --color-secondary-content: var(--color-slate-700);
  --color-secondary-content-subtle: var(--color-slate-500);
  --color-secondary-content-muted: var(--color-slate-400);
  --color-secondary-content-inverted: var(--color-white);
  --color-secondary-content-disabled: var(--color-slate-300);

  --color-secondary-stroke: var(--color-slate-200);
  --color-secondary-stroke-subtle: var(--color-slate-100);
  --color-secondary-stroke-strong: var(--color-slate-300);
  --color-secondary-stroke-hover: var(--color-slate-300);

  /**
   * Accent Colors
   * Brighter blue variants for highlights
   */
  --color-accent-surface: var(--color-blue-500);
  --color-accent-surface-subtle: var(--color-blue-50);
  --color-accent-surface-strong: var(--color-blue-600);
  --color-accent-surface-hover: var(--color-blue-400);
  --color-accent-surface-disabled: var(--color-blue-100);

  --color-accent-content: var(--color-blue-500);
  --color-accent-content-subtle: var(--color-blue-400);
  --color-accent-content-muted: var(--color-blue-300);
  --color-accent-content-inverted: var(--color-white);
  --color-accent-content-disabled: var(--color-blue-200);

  --color-accent-stroke: var(--color-blue-200);
  --color-accent-stroke-subtle: var(--color-blue-100);
  --color-accent-stroke-strong: var(--color-blue-300);
  --color-accent-stroke-hover: var(--color-blue-300);
}