/*
* shadcn-ui.css
*
* Update the below to customize your Shadcn UI CSS Colors.
* Refer to https://ui.shadcn.com/themes for applying new colors.
* NB: apply the hsl function to the colors copied from the theme.
 */

@layer base {
  :root {
    --font-sans:
      var(--font-sans) -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol';
    --font-heading: var(--font-heading);

    --background: hsla(0, 0%, 100%, 1);
    --foreground: hsla(240, 10%, 4%, 1);
    --foreground-50: hsla(240, 10%, 4%, 0.5);

    --background-90: hsla(0, 0%, 100%, 0.9);
    --background-80: hsla(0, 0%, 100%, 0.8);

    --card: var(--color-white);
    --card-foreground: var(--color-neutral-950);

    --popover: hsla(0, 0%, 100%, 1);
    --popover-foreground: hsla(240, 10%, 4%, 1);

    --primary: hsla(145, 78%, 18%, 1);
    --primary-foreground: hsla(356, 100%, 97%, 1);

    --primary-90: hsla(145, 78%, 18%, 0.9);
    --primary-80: hsla(145, 78%, 18%, 0.8);
    --primary-50: hsla(145, 78%, 18%, 0.5);
    --primary-20: hsla(145, 78%, 18%, 0.2);
    --primary-10: hsla(145, 78%, 18%, 0.1);

    --secondary: hsla(240, 5%, 96%, 1);
    --secondary-foreground: hsla(240, 6%, 10%, 1);

    --secondary-90: hsla(240, 5%, 96%, 0.9);
    --secondary-80: hsla(240, 5%, 96%, 0.8);

    --muted: hsla(240, 5%, 96%, 1);
    --muted-foreground: hsla(240, 4%, 41%, 1);

    --muted-90: hsla(240, 5%, 96%, 0.9);
    --muted-80: hsla(240, 5%, 96%, 0.8);
    --muted-50: hsla(240, 5%, 96%, 0.5);
    --muted-40: hsla(240, 5%, 96%, 0.4);

    --accent: hsla(240, 5%, 96%, 1);
    --accent-foreground: hsla(240, 6%, 10%, 1);

    --accent-90: hsla(240, 5%, 96%, 0.9);
    --accent-80: hsla(240, 5%, 96%, 0.8);
    --accent-50: hsla(240, 5%, 96%, 0.5);

    --success: hsla(142, 76%, 36%, 1);

    --destructive: hsla(0, 84%, 60%, 1);
    --destructive-foreground: hsla(0, 0%, 98%, 1);

    --destructiv-90: hsla(0, 84%, 60%, 0.9);
    --destructiv-80: hsla(0, 84%, 60%, 0.8);
    --destructiv-50: hsla(0, 84%, 60%, 0.5);

    --border: hsla(240, 6%, 90%, 1);
    --input: hsla(240, 6%, 90%, 1);
    --ring: var(--color-neutral-800);

    --radius: calc(1rem);
    --spacing: 0.25rem;

    --chart-1: var(--color-orange-400);
    --chart-2: var(--color-teal-600);
    --chart-3: var(--color-green-800);
    --chart-4: var(--color-yellow-200);
    --chart-5: var(--color-orange-200);

    --sidebar-background: var(--background);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--color-white);
    --sidebar-accent: var(--secondary);
    --sidebar-accent-foreground: var(--secondary-foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
  }

  .dark {
    --background: var(--color-neutral-900);
    --foreground: var(--color-white);

    --card: var(--color-neutral-900);
    --card-foreground: var(--color-white);

    --popover: var(--color-neutral-900);
    --popover-foreground: var(--color-white);

    --primary: var(--color-white);
    --primary-foreground: var(--color-neutral-900);

    --secondary: var(--color-neutral-800);
    --secondary-foreground: oklch(98.43% 0.0017 247.84);

    --muted: var(--color-neutral-800);
    --muted-foreground: hsla(240, 4%, 41%, 1);

    --accent: var(--color-neutral-800);
    --accent-foreground: oklch(98.48% 0 0);

    --destructive: var(--color-red-700);
    --destructive-foreground: var(--color-white);

    --border: var(--color-neutral-800);
    --input: var(--color-neutral-700);
    --ring: oklch(87.09% 0.0055 286.29);

    --chart-1: var(--color-blue-600);
    --chart-2: var(--color-emerald-400);
    --chart-3: var(--color-orange-400);
    --chart-4: var(--color-purple-500);
    --chart-5: var(--color-pink-500);

    --sidebar-background: var(--color-neutral-900);
    --sidebar-foreground: var(--color-white);
    --sidebar-primary: var(--color-blue-500);
    --sidebar-primary-foreground: var(--color-white);
    --sidebar-accent: var(--color-neutral-800);
    --sidebar-accent-foreground: var(--color-white);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--color-blue-500);
  }
}