:root {
  font-family: var(--font-inter), sans-serif;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: var(--font-inter-variable), sans-serif;
    font-optical-sizing: auto;
  }
}

@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@config '../../tailwind.config.mjs';

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

:root {
  --palette-base: #fff;
  --palette-50: oklch(0.98 0.005 95.9); /* #fafafa */
  --palette-100: oklch(0.97 0.003 107.8); /* #f5f5f5 */
  --palette-200: oklch(0.93 0.003 107.8); /* #e5e5e5 */
  --palette-300: oklch(0.89 0.003 107.8); /* #d4d4d4 */
  --palette-400: oklch(0.74 0.003 107.8); /* #a3a3a3 */
  --palette-500: oklch(0.6 0.003 107.8); /* #737373 */
  --palette-600: oklch(0.5 0.003 107.8); /* #525252 */
  --palette-700: oklch(0.45 0.003 107.8); /* #404040 */
  --palette-800: oklch(0.35 0.003 107.8); /* #262626 */
  --palette-900: oklch(0.3 0.003 107.8); /* #171717 */
  --palette-950: oklch(0.25 0.003 107.8); /* #0a0a0a */
}

.dark {
  --palette-base: #000;
  --palette-50: oklch(0.25 0.003 107.8); /* #0a0a0a */
  --palette-100: oklch(0.3 0.003 107.8); /* #171717 */
  --palette-200: oklch(0.35 0.003 107.8); /* #262626 */
  --palette-300: oklch(0.4 0.003 107.8); /* #373737 */
  --palette-400: oklch(0.5 0.003 107.8); /* #525252 */
  --palette-500: oklch(0.67 0.003 107.8); /* #8a8a8a */
  --palette-600: oklch(0.74 0.003 107.8); /* #a3a3a3 */
  --palette-700: oklch(0.89 0.003 107.8); /* #d4d4d4 */
  --palette-800: oklch(0.93 0.003 107.8); /* #e5e5e5 */
  --palette-900: oklch(0.97 0.003 107.8); /* #f5f5f5 */
  --palette-950: oklch(0.98 0.005 95.9); /* #fafafa */
}

@theme inline {
  --spacing: 4px;
  --color-white: #fff;
  --color-black: #000;
  --color-background: var(--palette-50);
  --color-foreground: var(--palette-600);
  --color-muted-foreground: var(--palette-400);
  --color-headings: var(--palette-800);
  --color-border: var(--palette-300);

  --font-sans: var(--font-inter), 
    ui-sans-serif, 
    system-ui, 
    sans-serif, 
    'Apple Color Emoji', 
    'Segoe UI Emoji', 
    'Segoe UI Symbol', 
    'Noto Color Emoji';
}
