:root {
  /* Toolbar */
  --comp-toolbar-height: 44px;
  --comp-toolbar-bg: color-mix(in srgb, var(--background) 92%, black);
  --comp-toolbar-border: var(--border-subtle);

  /* Button */
  --button-height-sm: 28px;
  --button-height-md: 34px;
  --button-height-lg: 40px;
  --button-radius: var(--radius-md);
  --button-padding-x-sm: var(--space-2);
  --button-padding-x-md: var(--space-3);
  --button-padding-x-lg: var(--space-4);
  --button-primary-bg: var(--primary);
  --button-primary-bg-hover: var(--primary-hover);
  --button-primary-fg: var(--primary-foreground);
  --button-secondary-bg: rgba(255, 255, 255, 0.06);
  --button-secondary-border: var(--border-default);
  --button-secondary-fg: var(--foreground);
  --button-ghost-fg: var(--foreground-muted);

  /* Input */
  --input-height-md: 34px;
  --input-radius: var(--radius-md);
  --input-border: var(--border-default);
  --input-bg: var(--surface-1);

  /* Panel */
  --panel-radius: var(--radius-lg);
  --panel-padding: var(--space-4);
  --panel-padding-lg: var(--space-5);
  --panel-bg: var(--surface-2);
  --panel-border: var(--border-subtle);

  /* Card */
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-4);
  --card-bg: var(--surface-1);
  --card-border: var(--border-default);

  /* Table */
  --table-row-height: 36px;
  --table-header-height: 36px;
  --table-border: var(--border-subtle);

  /* Badge / Tag */
  --tag-radius: var(--radius-pill);
  --tag-padding-x: var(--space-2);
  --tag-height: 20px;
  --comp-tag-bg: rgba(255, 255, 255, 0.06);
  --comp-tag-border: var(--border-default);
  --comp-tag-fg: var(--foreground-muted);
}