@import "tailwindcss";
@import "tw-animate-css";

@theme inline {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: var(--radius);
  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-card: var(--card);
  --color-card-foreground: var(--card-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);
  --background-image: var(--background-image);
  --chart-1: var(--chart-1);
  --chart-2: var(--chart-2);
  --chart-3: var(--chart-3);
  --chart-4: var(--chart-4);
  --chart-5: var(--chart-5);
}

:root {
  --radius: 0;
  --background: #fff;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdb33;
  --primary-hover: #ffcc00;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #d5d5d5;
  --muted-foreground: #5a5a5a;
  --accent: #fae583;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
  --background-image: url("/images/banner_void_2.svg");
  --chart-1: #c4a1ff;
  --chart-2: #01ffcc;
  --chart-3: #e7f192;
  --chart-4: #000;
  --chart-5: #ff30cd;
}

.dark {
  --background: #1a1a1a;
  --foreground: #f5f5f5;
  --card: #242424;
  --card-foreground: #f5f5f5;
  --primary: #ffdb33;
  --primary-hover: #ffcc00;
  --primary-foreground: #000;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --muted: #3f3f46;
  --muted-foreground: #a0a0a0;
  --accent: #fae583;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #5c5c5c;
  --background-image: url("/images/bg_void_3.svg");
  --chart-1: #ffdb33;
  --chart-2: #000;
  --chart-3: #aeaeae;
  --chart-4: #fae583;
  --chart-5: #e63946;
}

.with-radius {
  --radius: 0.5rem;
}

.theme-purple {
  --background: #f5f5f5;
  --foreground: #1a1a1a;
  --card: #FFFFFF;
  --card-foreground: #f5f5f5;
  --primary: #5F4FE6;
  --primary-hover: #4938C2;
  --primary-foreground: #fff;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --muted: #CFCCEA;
  --muted-foreground: #5B5686;
  --accent: #FED13B;
  --accent-foreground: #000000;
  --destructive: #EF4444;
  --destructive-foreground: #fff;
  --border: #3a3a3a;
  --background-image: url("/images/bg_void_3.svg");
  --chart-1: #ffdb33;
  --chart-2: #000;
  --chart-3: #aeaeae;
  --chart-4: #fae583;
  --chart-5: #e63946;
}

.dark .theme-purple {
  --background: #0f0f12;
  --foreground: #f5f5f5;
  --card: #1a1a1d;
  --card-foreground: #eaeaea;
  --primary: #7b6df5;
  --primary-hover: #5F4FE6;
  --primary-foreground: #fff;
  --secondary: #2a2a2e;
  --secondary-foreground: #eaeaea;
  --muted: #3d395a;
  --muted-foreground: #a49fce;
  --accent: #FED13B;
  --accent-foreground: #000;
  --destructive: #EF4444;
  --destructive-foreground: #fff;
  --border: #2e2e32;
}

.theme-lime {
  --background: #FFFFFF;
  --foreground: #000000;
  --card: #FFFFFF;
  --card-foreground: #000000;
  --input: #FFFFFF;
  --border: #000000;
  --ring: #AAFC3D;
  --primary: #AAFC3D;
  --primary-hover: #97f819;
  --primary-foreground: #000000;
  --secondary: #000000;
  --secondary-foreground: #FFFFFF;
  --muted: #F3F3F3;
  --muted-foreground: #444444;
  --accent: #FF4FD8;
  --accent-foreground: #000000;
  --destructive: #FF0033;
  --destructive-foreground: #FFFFFF;
}


.dark .theme-lime {
  --background: #0f0f0f;
  --foreground: #f5f5f5;
  --card: #1a1a1a;
  --card-foreground: #FFFFFF;
  --input: #2a2a2a;
  --border: #333333;
  --ring: #AAFC3D;
  --primary: #AAFC3D;
  --primary-hover: #97f819;
  --primary-foreground: #000000;
  --secondary: #FFFFFF;
  --secondary-foreground: #000000;
  --muted: #2a2a2a;
  --muted-foreground: #aaaaaa;
  --accent: #FF4FD8;
  --accent-foreground: #000000;
  --destructive: #FF0033;
  --destructive-foreground: #FFFFFF;
}

.theme-red {
  --background: #FCFFE7;
  --foreground: #000000;
  --muted: #EFD0D5;
  --muted-foreground: #A42439;
  --card: #FFFFFF;
  --card-foreground: #000000;
  --popover: #FFFFFF;
  --popover-foreground: #000000;
  --border: #000000;
  --input: #FFFFFF;
  --primary: #EA435F;
  --primary-hover: #D00000;
  --primary-foreground: #FFFFFF;
  --secondary: #FFDA5C;
  --secondary-foreground: #000000;
  --accent: #CEEBFC;
  --accent-foreground: #000000;
  --destructive: #D00000;
  --destructive-foreground: #FFFFFF;
  --ring: #000000;
}

.dark .theme-red {
  --background: #0f0f0f;
  --foreground: #f5f5f5;
  --muted: #3a1f24;
  --muted-foreground: #f2a7b2;
  --card: #1a1a1a;
  --card-foreground: #ffffff;
  --popover: #1a1a1a;
  --popover-foreground: #ffffff;
  --border: #2a2a2a;
  --input: #2a2a2a;
  --primary: #EA435F;
  --primary-hover: #D00000;
  --primary-foreground: #ffffff;
  --secondary: #FFDA5C;
  --secondary-foreground: #000000;
  --accent: #2a3b45;
  --accent-foreground: #CEEBFC;
  --destructive: #D00000;
  --destructive-foreground: #ffffff;
  --ring: #EA435F;
}

.theme-lavender {
  --background: #F9F5F2;
  --foreground: #000000;
  --muted: #EDE3FF;
  --muted-foreground: #5B3B98;
  --card: #FFFFFF;
  --card-foreground: #000000;
  --popover: #FFFFFF;
  --popover-foreground: #000000;
  --border: #000000;
  --input: #FFFFFF;
  --primary: #C4A1FF;
  --primary-hover: #9678FF;
  --primary-foreground: #000000;
  --secondary: #E7F193;
  --secondary-foreground: #000000;
  --accent: #FE91E9;
  --accent-foreground: #000000;
  --destructive: #FE3B3B;
  --destructive-foreground: #FFFFFF;
  --ring: #000000;
}

.dark .theme-lavender {
  --background: #121014;
  --foreground: #f5f5f5;
  --muted: #2d2440;
  --muted-foreground: #c7b6f3;
  --card: #1a1820;
  --card-foreground: #ffffff;
  --popover: #1a1820;
  --popover-foreground: #ffffff;
  --border: #2a2a2e;
  --input: #2a2a2e;
  --primary: #C4A1FF;
  --primary-hover: #9678FF;
  --primary-foreground: #000000;
  --secondary: #E7F193;
  --secondary-foreground: #000000;
  --accent: #FE91E9;
  --accent-foreground: #000000;
  --destructive: #FE3B3B;
  --destructive-foreground: #ffffff;
  --ring: #C4A1FF;
}

.theme-orange {
  --background: #FFFFFF;
  --foreground: #000000;
  --muted: #FFE1C7;
  --muted-foreground: #8C3D00;
  --card: #FFFFFF;
  --card-foreground: #000000;
  --popover: #FFFFFF;
  --popover-foreground: #000000;
  --border: #000000;
  --input: #FFFFFF;
  --primary: #F07200;
  --primary-hover: #ff8011;
  --primary-foreground: #FDEAD9;
  --secondary: #EF8C27;
  --secondary-foreground: #000000;
  --accent: #FF6B6B;
  --accent-foreground: #000000;
  --destructive: #FE3B3B;
  --destructive-foreground: #FFFFFF;
  --ring: #000000;
}

.dark .theme-orange {
  --background: #12100e;
  --foreground: #f5f5f5;
  --muted: #3a2617;
  --muted-foreground: #ffb679;
  --card: #1a1a1a;
  --card-foreground: #ffffff;
  --popover: #1a1a1a;
  --popover-foreground: #ffffff;
  --border: #2a2a2a;
  --input: #2a2a2a;
  --primary: #F07200;
  --primary-hover: #ff8011;
  --primary-foreground: #FDEAD9;
  --secondary: #EF8C27;
  --secondary-foreground: #000000;
  --accent: #FF6B6B;
  --accent-foreground: #000000;
  --destructive: #FE3B3B;
  --destructive-foreground: #ffffff;
  --ring: #F07200;
}

.theme-green {
  --background: #FFFFFF;
  --foreground: #000000;
  --muted: #CBE9D8;
  --muted-foreground: #1F7751;
  --card: #F9F5F2;
  --card-foreground: #000000;
  --popover: #FFFFFF;
  --popover-foreground: #000000;
  --border: #000000;
  --input: #FFFFFF;
  --primary: #599D77;
  --primary-hover: #39654c;
  --primary-foreground: #FFFFFF;
  --secondary: #A3D9B1;
  --secondary-foreground: #000000;
  --accent: #FFE75A;
  --accent-foreground: #000000;
  --destructive: #F05D5D;
  --destructive-foreground: #FFFFFF;
  --ring: #000000;
}

.dark .theme-green {
  --background: #0f1210;
  --foreground: #f5f5f5;
  --muted: #1f3a2d;
  --muted-foreground: #9cd9b8;
  --card: #181c19;
  --card-foreground: #ffffff;
  --popover: #181c19;
  --popover-foreground: #ffffff;
  --border: #2a2e2b;
  --input: #2a2e2b;
  --primary: #599D77;
  --primary-hover: #39654c;
  --primary-foreground: #ffffff;
  --secondary: #3a6f52;
  --secondary-foreground: #ffffff;
  --accent: #FFE75A;
  --accent-foreground: #000000;
  --destructive: #F05D5D;
  --destructive-foreground: #ffffff;
  --ring: #599D77;
}

body {
  font-family: var(--font-sans);
}


/* Firefox scrollbar */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--muted) var(--foreground);
}

.bg-image {
  background-image: var(--background-image);
  background-size: cover;
  background-position: center;
}

.text-outlined {
  letter-spacing: 2px;
  text-shadow:
    0px 0px 0 var(--primary),
    0px 0px 0 var(--primary),
    4px 4px 0 var(--primary),
    4px 4px 0 var(--primary);
}

/* Syntax Highlighting stuff */

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

.hljs {
  background: #222;
  color: #aaa;
}

.hljs-subst {
  color: #aaa;
}

.hljs-section {
  color: #fff;
}

.hljs-comment,
.hljs-quote,
.hljs-meta {
  color: #444;
}

.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-regexp {
  color: #ffcc33;
}

.hljs-number,
.hljs-addition {
  color: #00cc66;
}

.hljs-built_in,
.hljs-literal,
.hljs-type,
.hljs-template-variable,
.hljs-attribute,
.hljs-link {
  color: #32aaee;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: #6644aa;
}

.hljs-title,
.hljs-variable,
.hljs-deletion,
.hljs-template-tag {
  color: #bb1166;
}

.hljs-section,
.hljs-doctag,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

/* Custom scrollbar for sidebar */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

.sidebar-scroll:hover {
  scrollbar-color: var(--color-primary) transparent;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.sidebar-scroll::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  transition: background 0.3s ease;
}