.ps-tonal-solid-surface {
  --tonal-canvas: hsl(var(--background));
  --tonal-surface: hsl(var(--card));
  --tonal-surface-muted: hsl(var(--muted));
  --tonal-surface-elevated: hsl(var(--popover));
  --tonal-line: hsl(var(--border));
  --tonal-line-strong: color-mix(in srgb, hsl(var(--foreground)) 24%, hsl(var(--border)));
  --tonal-accent-subtle: color-mix(in srgb, hsl(var(--primary)) 14%, hsl(var(--card)));
  --tonal-shadow-resting: 0 1px 2px hsl(var(--background) / 0.2);
  --tonal-shadow-elevated: 0 14px 38px hsl(var(--background) / 0.32);
  isolation: isolate;
  color: hsl(var(--foreground));
  background: var(--tonal-canvas);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
}

[data-theme-polarity='light'] .ps-tonal-solid-surface,
.ps-tonal-solid-surface[data-theme-polarity='light'] {
  --tonal-line-strong: color-mix(in srgb, hsl(var(--foreground)) 30%, hsl(var(--border)));
  --tonal-shadow-resting: 0 1px 3px hsl(var(--foreground) / 0.1);
  --tonal-shadow-elevated: 0 16px 38px hsl(var(--foreground) / 0.14);
}

.ps-tonal-solid-portal {
  display: contents;
}

.ps-tonal-solid-surface :where([data-design-component='card'], [data-design-component='table']) {
  border-color: var(--tonal-line);
  color: hsl(var(--foreground));
  background: var(--tonal-surface);
  box-shadow: var(--tonal-shadow-resting);
  backdrop-filter: none;
}

.ps-tonal-solid-surface [data-design-component='input'] {
  border-color: var(--tonal-line);
  color: hsl(var(--foreground));
  background: var(--tonal-surface-muted);
  backdrop-filter: none;
}

.ps-tonal-solid-surface [data-design-component='interactive-row']:hover {
  color: hsl(var(--foreground));
  background: var(--tonal-accent-subtle);
}

.ps-tonal-solid-surface :where([role='dialog'], [data-design-component='dialog']) {
  border-color: var(--tonal-line-strong);
  background: var(--tonal-surface-elevated);
  box-shadow: var(--tonal-shadow-elevated);
  backdrop-filter: none;
}