Configuration

@import "tailwindcss";
@import "@nuxt/ui";

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

/*
 * Awecode Design System Theme
 * Primary: Warm terracotta/copper (hue ~39)
 * Neutral: Warm stone grays (mapped to Tailwind 'stone')
 */

@theme static {
--color-primary-50: oklch(0.958 0.009 34.44);
  --color-primary-100: oklch(0.924 0.017 31.16);
  --color-primary-200: oklch(0.841 0.041 33.45);
  --color-primary-300: oklch(0.766 0.067 33.93);
  --color-primary-400: oklch(0.69 0.096 36.79);
  --color-primary-500: oklch(0.607 0.084 36.93);
  --color-primary-600: oklch(0.517 0.072 37.14);
  --color-primary-700: oklch(0.419 0.059 36.12);
  --color-primary-800: oklch(0.323 0.046 36.17);
  --color-primary-900: oklch(0.237 0.033 38.28);
  --color-primary-950: oklch(0.178 0.025 32.76);

  /*
  --color-primary: var(--color-primary-500);
  */

  /* Fonts */
  --font-sans: 'PT Sans', ui-sans-serif, sans-serif, system-ui;
  --font-serif: 'PT Serif', ui-serif, serif;
  --font-mono: 'Fira Code', ui-monospace, monospace;
}

/* Nuxt UI CSS variable overrides */
:root {
  --ui-radius: 0.2rem;

  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

h1, h2, h3 {
  @apply font-serif;
}

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'awecode',
      neutral: 'stone'
    }
  }
})