/**
 * Smooth Theme
 * Rounded, soft design with generous radius and subtle purple accents
 */

:root {
  --radius: 1.5;
  --spacing-scale: 1.25;

  /* Background colors */
  --bg-default: var(--color-gray-100);
  --bg-subtle: var(--color-alpha-100);
  --bg-strong: var(--color-gray-0);

  /* Border colors */
  --border-default: var(--color-gray-200);
  --border-strong: var(--color-gray-300);
  --border-subtle: var(--color-gray-100);

  /* Semantic colors */
  --card: var(--bg-strong);
  --card-border: var(--border-default);
  --card-group: var(--color-alpha-50);
  --card-group-border: var(--border-default);
  --input: var(--color-alpha-100);
  --popover: var(--bg-default);

  /* Navigation */
  --navigation: var(--bg-default);
  --navigation-border: var(--border-default);
  --navigation-selected: var(--bg-subtle);
  --navigation-selected-shadow: none;
  --navigation-selected-icon: rgb(var(--color-accent));

  /* Screen wrapper - no border/radius for smooth */
  --page: var(--bg-default);
  --page-border: transparent;
  --page-radius: 0;
  --spacing-page: 0;
}

/* Support both data-color-scheme attribute and .dark class */
.dark,
[data-color-scheme="dark"] {
  /* Text colors - same scale numbers, inverted values */
  --text-strong: var(--color-gray-950);
  --text-default: var(--color-gray-900);
  --text-subtle: var(--color-gray-600);

  /* Background colors - same scale numbers as light mode */
  --bg-default: var(--color-gray-50);
  --bg-subtle: var(--color-alpha-100);
  --bg-strong: var(--color-gray-200);

  /* Border colors - same scale numbers as light mode */
  --border-default: var(--color-gray-200);
  --border-strong: var(--color-gray-300);
  --border-subtle: var(--color-gray-100);

  /* Semantic colors */
  --card: var(--bg-strong);
  --card-border: var(--border-default);
  --card-group: var(--color-alpha-50);
  --card-group-border: var(--border-default);
  --input: var(--color-alpha-200);
  --navigation: var(--bg-default);
  --navigation-border: var(--border-subtle);
  --popover: var(--bg-default);

  /* Screen wrapper */
  --page: transparent;
  --page-border: transparent;
  --page-radius: 0;
  --spacing-page: 0;
}

/* System preference fallback for Smooth theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]):not(.dark):not(.light) {
    /* Text colors - same scale numbers, inverted values */
    --text-strong: var(--color-gray-950);
    --text-default: var(--color-gray-900);
    --text-subtle: var(--color-gray-600);

    /* Background colors - same scale numbers as light mode */
    --bg-default: var(--color-gray-50);
    --bg-subtle: var(--color-alpha-100);
    --bg-strong: var(--color-gray-200);

    /* Border colors - same scale numbers as light mode */
    --border-default: var(--color-gray-200);
    --border-strong: var(--color-gray-300);
    --border-subtle: var(--color-gray-100);

    /* Semantic colors */
    --card: var(--bg-strong);
    --card-border: var(--border-default);
    --card-group: var(--bg-subtle);
    --card-group-border: var(--border-default);
    --input: var(--color-alpha-200);
    --navigation: var(--bg-default);
    --navigation-border: var(--border-subtle);
    --popover: var(--bg-default);

    /* Screen wrapper */
    --page: transparent;
    --page-border: transparent;
    --page-radius: 0;
    --spacing-page: 0;
  }
}