@import './keyframes.css';

@variant dark (&:where(.dark, .dark *));

@layer base {
  body {
    @apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)];
  }

  :root {
    color-scheme: light;

    --ui-text-dimmed: var(--ui-color-neutral-400);
    --ui-text-muted: var(--ui-color-neutral-500);
    --ui-text-toned: var(--ui-color-neutral-600);
    --ui-text: var(--ui-color-neutral-700);
    --ui-text-highlighted: var(--ui-color-neutral-900);

    --ui-bg: var(--color-white);
    --ui-bg-muted: var(--ui-color-neutral-50);
    --ui-bg-elevated: var(--ui-color-neutral-100);
    --ui-bg-accented: var(--ui-color-neutral-200);
    --ui-bg-inverted: var(--ui-color-neutral-900);

    --ui-border: var(--ui-color-neutral-200);
    --ui-border-muted: var(--ui-color-neutral-200);
    --ui-border-accented: var(--ui-color-neutral-300);
    --ui-border-inverted: var(--ui-color-neutral-900);

    --ui-radius: var(--radius-sm);
    --ui-container: var(--container-7xl);
  }

  .dark {
    color-scheme: dark;

    --ui-text-dimmed: var(--ui-color-neutral-500);
    --ui-text-muted: var(--ui-color-neutral-400);
    --ui-text-toned: var(--ui-color-neutral-300);
    --ui-text: var(--ui-color-neutral-200);
    --ui-text-highlighted: var(--color-white);

    --ui-bg: var(--ui-color-neutral-900);
    --ui-bg-muted: var(--ui-color-neutral-800);
    --ui-bg-elevated: var(--ui-color-neutral-800);
    --ui-bg-accented: var(--ui-color-neutral-700);
    --ui-bg-inverted: var(--color-white);

    --ui-border: var(--ui-color-neutral-800);
    --ui-border-muted: var(--ui-color-neutral-700);
    --ui-border-accented: var(--ui-color-neutral-700);
    --ui-border-inverted: var(--color-white);
  }
}
