@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer base {
  :root {
    --color-neutral-50: theme('colors.gray.50');
    --color-neutral-100: theme('colors.gray.100');
    --color-neutral-200: theme('colors.gray.200');
    --color-neutral-300: theme('colors.gray.300');
    --color-neutral-400: theme('colors.gray.400');
    --color-neutral-500: theme('colors.gray.500');
    --color-neutral-600: theme('colors.gray.600');
    --color-neutral-700: theme('colors.gray.700');
    --color-neutral-800: theme('colors.gray.800');
    --color-neutral-900: theme('colors.gray.900');
    --color-neutral-950: theme('colors.gray.950');
  }
}

/* colors: {
  azure: {
    50: '#f1f3fe',
    100: '#dde4fd',
    200: '#c0d0fc',
    300: '#95baf9',
    400: '#669df4',
    500: '#4382ef',
    600: '#2b6be3',
    700: '#2360d1',
    800: '#2354a9',
    900: '#224f87',
    950: '#193452',
  },
  cinnabar: {
    50: '#fef2f1',
    100: '#fee3e1',
    200: '#ffccc7',
    300: '#fdaea5',
    400: '#fa8070',
    500: '#f15941',
    600: '#e0492e',
    700: '#bc351a',
    800: '#9a3119',
    900: '#82311c',
    950: '#441609',
  },
  emerald: {
    50: '#f7fbf3',
    100: '#e9f8e2',
    200: '#caefc3',
    300: '#92e295',
    400: '#49c55e',
    500: '#37ae5d',
    600: '#279058',
    700: '#237154',
    800: '#205b4d',
    900: '#1c4a49',
    950: '#0a2529',
  },
  amethyst: {
    50: '#f4f3ff',
    100: '#ebeafd',
    200: '#dbd7fd',
    300: '#bfb7fb',
    400: '#a08ef7',
    500: '#8161f1',
    600: '#6e3fe8',
    700: '#6838d6',
    800: '#5025b2',
    900: '#432191',
    950: '#281362',
  },
  sunshade: {
    50: '#fff6f0',
    100: '#ffe4cc',
    200: '#ffc98f',
    300: '#ffae52',
    400: '#ff9b29',
    500: '#f97b06',
    600: '#de6502',
    700: '#b74d06',
    800: '#923f0c',
    900: '#78390d',
    950: '#452102',
  },
}, */

.theme-light {
  --neutralBg: var(--color-neutral-50);
  --onNeutralBg: var(--color-neutral-900);
  --primaryBg: theme('colors.sunshade.50');
  --onPrimaryBg: theme('colors.sunshade.900');
  --primary: theme('colors.sunshade.500');
  --accent: theme('colors.azure.600');
}

.theme-dark {
  --neutralBg: var(--color-neutral-900);
  --onNeutralBg: var(--color-neutral-50);
  --primaryBg: theme('colors.sunshade.900');
  --onPrimaryBg: theme('colors.sunshade.50');
  --primary: theme('colors.sunshade.500');
  --accent: theme('colors.azure.600');
}