@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

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

@theme inline {
  /* UI Core */
  --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);

  /* Charts - IMPORTANT: Must be here for Shadcn Charts to work */
  --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);

  /* Sidebar - IMPORTANT: Must be here for Shadcn Sidebar to work */
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-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);

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

  --font-kotayk: var(--font-kotayk);
  --font-avoda: var(--font-avoda);
  --font-montserrat-arm: var(--font-montserrat-arm);
  --font-montserrat: var(--font-montserrat);

  /* Define a "Main" font that Tailwind uses for font-sans */
  --font-sans: var(--font-main), ui-sans-serif, system-ui;

  /* Custom Colors */
  --color-primaryPurple-400: var(--primaryPurple-400);
  --color-primaryPurple-500: var(--primaryPurple-500);
  --color-primaryPurple-600: var(--primaryPurple-600);
  --color-primaryPurple-100: var(--primaryPurple-100);
  --color-primaryPurple-700: var(--primaryPurple-700);
  --color-primaryPurple-300: var(--primaryPurple-300);
  --color-primaryPurple-200: var(--primaryPurple-200);
  --color-lightGray: var(--lightGray);
  --color-secondary-500: var(--secondary-500);
  --color-neutral-100: var(--neutral-100);
  --color-neutral-400: var(--neutral-400);
  --color-neutral-500: var(--neutral-500);
  --color-neutral-900: var(--neutral-900);
  --color-neutral-600: var(--neutral-600);
  --color-neutral-700: var(--neutral-700);
  --color-martinique: var(--martinique);
  --color-chaosBlack: var(--chaosBlack);
}

:root {
  --radius: 0.625rem;
  --background: #ffffff;
  --foreground: #212121;
  --card: #ffffff;
  --card-foreground: #212121;
  --popover: #ffffff;
  --popover-foreground: #212121;
  --primary: #383a57;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f4;
  --secondary-foreground: #313131;
  --muted: #f4f4f4;
  --muted-foreground: #898989;
  --accent: #f4f4f4;
  --accent-foreground: #313131;
  --destructive: #e11d48;
  --destructive-foreground: #fafafa;
  --border: #e2e2e2;
  --input: #e2e2e2;
  --ring: #888bad;
  /* Chart HEX */
  --chart-1: #e76e50;
  --chart-2: #2a9d8f;
  --chart-3: #264653;
  --chart-4: #e9c46a;
  --chart-5: #f4a261;
  /* Sidebar HEX */
  --sidebar: #fafafa;
  --sidebar-foreground: #212121;
  --sidebar-primary: #313131;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f4f4f4;
  --sidebar-accent-foreground: #313131;
  --sidebar-border: #e2e2e2;
  --sidebar-ring: #b2b2b2;

  /* Custom */
  --primaryPurple-400: #9380ec;
  --primaryPurple-500: #9846bb;
  --primaryPurple-100: #c9bff5;
  --primaryPurple-600: #6851ba;
  --primaryPurple-700: #5241a2;
  --primaryPurple-300: #a796f3;
  --primaryPurple-200: #d1c8ff;
  --neutral-500: #707396;
  --neutral-900: #212121;
  --neutral-600: #5c5f82;
  --neutral-700: #4a4d6a;
  --neutral-400: #888bad;
  --neutral-100: #dcdef3;
  --lightGray: #f1f3ff;
  --secondary-500: #4e59cd;
  --martinique: #383a57;
  --chaosBlack: #101010;

  --font-main: var(--font-montserrat);
}

.dark {
  --background: #212121;
  --foreground: #fafafa;
  --card: #313131;
  --card-foreground: #fafafa;
  --popover: #313131;
  --popover-foreground: #fafafa;
  --primary: #e2e2e2;
  --primary-600: #303845;
  --primary-foreground: #313131;
  --secondary: #424242;
  --secondary-foreground: #fafafa;
  --muted: #424242;
  --muted-foreground: #b2b2b2;
  --accent: #424242;
  --accent-foreground: #fafafa;
  --destructive: #9f1239;
  --destructive-foreground: #fafafa;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #888bad;
  /* Chart HEX Dark */
  --chart-1: #2662d9;
  --chart-2: #2eb88a;
  --chart-3: #e88c30;
  --chart-4: #af57db;
  --chart-5: #ad1119;
  /* Sidebar HEX Dark */
  --sidebar: #313131;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #2662d9;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #424242;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #898989;

  /* Custom */
  --primaryPurple-400: #9380ec;
  --primaryPurple-500: #9846bb;
  --primaryPurple-100: #c9bff5;
  --primaryPurple-600: #6851ba;
  --primaryPurple-700: #5241a2;
  --primaryPurple-300: #a796f3;
  --primaryPurple-200: #d1c8ff;
  --neutral-500: #707396;
  --neutral-900: #212121;
  --neutral-600: #5c5f82;
  --neutral-700: #4a4d6a;
  --neutral-400: #888bad;
  --neutral-100: #dcdef3;
  --lightGray: #f1f3ff;
  --secondary-500: #4e59cd;
  --martinique: #383a57;
  --chaosBlack: #101010;
}

html[lang="hy"] {
  --font-main: var(--font-montserrat-arm);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.myContainer {
  padding-inline: 1.5rem;
}

@media (min-width: 1024px) {
  .myContainer {
    padding-inline: 2rem;
  }
}
@media (min-width: 1280px) {
  .myContainer {
    padding-inline: 3rem;
  }
}
@media (min-width: 1536px) {
  .myContainer {
    padding-inline: 3rem;
  }
}