/*
* theme.css
*
* Shadcn UI theme
* Use this file to add any custom styles or override existing Shadcn UI styles
 */

/* container utility */

/* Shadcn UI theme */
@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);

  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);

  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

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

  --warning: hsla(25, 95%, 53%, 1);
  --color-warning: var(--warning);

  --cyan: hsla(189, 94%, 43%, 1);
  --color-cyan: var(--cyan);

  /* text colors */
  --color-text-foreground: var(--foreground);
  --color-text-primary: var(--primary);
  --color-text-primary-foreground: var(--primary-foreground);
  --color-text-secondary: var(--secondary);
  --color-text-secondary-foreground: var(--secondary-foreground);
  --color-text-muted: var(--muted);
  --color-text-muted-foreground: var(--muted-foreground);
  --color-text-accent: var(--accent);
  --color-text-accent-foreground: var(--accent-foreground);
  --color-text-destructive: var(--destructive);
  --color-text-destructive-foreground: var(--destructive-foreground);
  --color-text-popover-foreground: var(--popover-foreground);

  /* background colors */
  --color-bg-background: var(--background);
  --color-bg-background-90: var(--background-90);
  --color-bg-background-80: var(--background-80);
  --color-bg-primary: var(--primary);
  --color-bg-primary-90: var(--primary-90);
  --color-bg-primary-80: var(--primary-80);
  --color-bg-primary-20: var(--primary-20);
  --color-bg-primary-10: var(--primary-10);
  --color-bg-secondary: var(--secondary);
  --color-bg-secondary-90: var(--secondary-90);
  --color-bg-secondary-80: var(--secondary-80);
  --color-bg-destructive: var(--destructive);
  --color-bg-destructive-90: var(--destructive-90);
  --color-bg-destructive-80: var(--destructive-80);
  --color-bg-accent: var(--accent);
  --color-bg-accent-90: var(--accent-90);
  --color-bg-accent-80: var(--accent-80);
  --color-bg-accent-50: var(--accent-50);
  --color-bg-muted: var(--muted);
  --color-bg-muted-90: var(--muted-90);
  --color-bg-muted-80: var(--muted-80);
  --color-bg-muted-50: var(--muted-50);
  --color-bg-popover: var(--popover);
  --color-bg-border: var(--border);
  --color-bg-input: var(--input);

  /* border colors */
  --color-border-border: var(--border);
  --color-border-foreground: var(--foreground);
  --color-border-foreground-50: var(--foreground-50);
  --color-border-input: var(--input);
  --color-border-ring: var(--ring);

  --color-border-primary: var(--primary);
  --color-border-primary-50: var(--primary-50);
  --color-border-primary-foreground: var(--primary-foreground);

  --color-border-destructive: var(--destructive-50);
  --color-border-toast-destructive: var(--muted-40);
  --color-border-muted: var(--muted);

  --radius-radius: var(--radius);

  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: calc(var(--radius) + 4px);

  --font-sans: -apple-system, var(--font-sans);
  --font-heading: var(--font-heading);

  --color-sidebar: var(--sidebar-background);
  --color-sidebar-foreground: var(--color-text-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --animate-fade-up: fade-up 0.5s;
  --animate-fade-down: fade-down 0.5s;
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  --breakpoint-xs: 30rem;
  --breakpoint-sm: 48rem;
  --breakpoint-md: 70rem;
  --breakpoint-lg: 80rem;
  --breakpoint-xl: 96rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;

  --container-max-width: 80rem;

  @keyframes accordion-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }

    to {
      height: 0;
    }
  }

  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    80% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }

  @keyframes fade-down {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    80% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
}