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

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

:root {
  /* Custom values */

  --font-heading: 'Comfortaa', sans-serif;
  --font-label: 'Varela Round', sans-serif;
  --font-button: 'Varela Round', sans-serif;

  --transparent: transparent;

  --neutral-000: oklch(0 0 0);
  --neutral-100: oklch(0.2264 0 0);
  --neutral-150: oklch(0.2972 0 0);
  --neutral-200: oklch(0.3407 0 0);
  --neutral-300: oklch(0.4495 0 0);
  --neutral-400: oklch(0.5486 0 0);
  --neutral-450: oklch(0.6 0 0);
  --neutral-500: oklch(0.6434 0 0);
  --neutral-600: oklch(0.738 0 0);
  --neutral-700: oklch(0.8266 0 0);
  --neutral-750: oklch(0.9128 0 0);
  --neutral-800: oklch(0.9702 0 0);
  --neutral-900: oklch(1 0 0);

  --background: var(--neutral-800);
  --background-reversed: var(--neutral-000);
  --base: var(--neutral-800);
  --text: var(--neutral-000);
  --text-alt: var(--neutral-900);
  --text-input: var(--text);
  --text-muted-input: var(--neutral-450);
  --text-muted: var(--neutral-300);
  --muted-input: var(--neutral-600);
  --background-disabled: var(--neutral-500);
  --text-disabled: var(--neutral-700);
  --radius: 0.688rem;

  --primary: oklch(0.7493 0.1551 74.95);
  --hover-primary: oklch(0.7493 0.1551 74.95 / 0.8);
  --active-primary: oklch(0.6191 0.1218 77.58);
  --disabled-primary: oklch(0.7493 0.1551 74.95 / 0.5);

  --secondary: oklch(0.4937 0.1697 271.26);
  --hover-secondary: oklch(0.4937 0.1697 271.26 / 0.8);
  --active-secondary: oklch(0.4254 0.133 272.15);
  --disabled-secondary: oklch(0.4937 0.1697 271.26 / 0.5);

  --muted: var(--color-neutral-700);
  --hover-muted: var(--color-neutral-600);
  --active-muted: var(--color-neutral-400);
  --disabled-muted: var(--color-neutral-400);

  --card: var(--neutral-800);

  --sidebar-width-icon: 32px;

  /* ------------------- */

  --foreground: oklch(0.13 0.028 261.692);

  --card-foreground: oklch(0.13 0.028 261.692);

  --popover: oklch(1 0 0);

  --popover-foreground: oklch(0.13 0.028 261.692);

  --primary-foreground: oklch(0.985 0.002 247.839);

  --popover-hover: var(--neutral-750);

  --secondary-foreground: oklch(0.21 0.034 264.665);

  --muted-foreground: oklch(0.551 0.027 264.364);

  --accent: oklch(0.967 0.003 264.542);

  --accent-foreground: oklch(0.21 0.034 264.665);

  --destructive: oklch(0.577 0.245 27.325);

  --border: oklch(0.928 0.006 264.531);

  --input: oklch(0.928 0.006 264.531);

  --ring: oklch(0.707 0.022 261.325);

  --chart-1: oklch(0.646 0.222 41.116);

  --chart-2: oklch(0.6 0.118 184.704);

  --chart-3: oklch(0.398 0.07 227.392);

  --chart-4: oklch(0.828 0.189 84.429);

  --chart-5: oklch(0.769 0.188 70.08);

  --sidebar: var(--background);

  --sidebar-foreground: var(--text);

  --sidebar-primary: oklch(0.21 0.034 264.665);

  --sidebar-primary-foreground: var(--text);

  --sidebar-accent: oklch(0.967 0.003 264.542);

  --sidebar-accent-foreground: var(--text);

  --sidebar-border: oklch(0.928 0.006 264.531);

  --sidebar-ring: oklch(0.707 0.022 261.325);
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300 700;
  src: url('/fonts/Comfortaa/Comfortaa-VariableFont_weight.ttf')
    format('truetype');
}

@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/VarelaRound/VarelaRound-Regular.ttf') format('truetype');
}

@theme inline {
  --font-heading: var(--font-heading);
  --font-label: var(--font-label);
  --font-button: var(--font-button);

  --transparent: var(--transparent);

  --color-neutral-000: var(--neutral-000);
  --color-neutral-100: var(--neutral-100);
  --color-neutral-150: var(--neutral-150);
  --color-neutral-200: var(--neutral-200);
  --color-neutral-300: var(--neutral-300);
  --color-neutral-400: var(--neutral-400);
  --color-neutral-500: var(--neutral-500);
  --color-neutral-600: var(--neutral-600);
  --color-neutral-650: var(--neutral-650);
  --color-neutral-700: var(--neutral-700);
  --color-neutral-750: var(--neutral-750);
  --color-neutral-800: var(--neutral-800);
  --color-neutral-900: var(--neutral-900);

  --color-background: var(--neutral-750);
  --color-background-reversed: var(--background-reversed);
  --color-base: var(--neutral-800);
  --color-text: var(--text);
  --color-text-alt: var(--text-alt);
  --color-text-input: var(--text-input);
  --color-text-muted-input: var(--text-muted-input);
  --color-text-muted: var(--text-muted);
  --color-muted-input: var(--muted-input);

  --color-background-disabled: var(--neutral-500);
  --color-text-disabled: var(--neutral-700);
  --radius: 0.688rem;

  --color-primary: var(--primary);
  --color-hover-primary: var(--hover-primary);
  --color-active-primary: var(--active-primary);
  --color-disabled-primary: var(--disabled-primary);

  --color-secondary: var(--secondary);
  --color-hover-secondary: var(--hover-secondary);
  --color-active-secondary: var(--active-secondary);
  --color-disabled-secondary: var(--disabled-secondary);

  --color-muted: var(--muted);
  --color-hover-muted: var(--hover-muted);
  --color-active-muted: var(--active-muted);
  --color-disabled-muted: var(--disabled-muted);

  /* Custom values */

  --radius-sm: calc(var(--radius) - 4px);

  --radius-md: calc(var(--radius) - 2px);

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

  --radius-xl: calc(var(--radius) + 4px);

  --color-background: var(--background);

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

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

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

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

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

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

  --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(--color-neutral-750);

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

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

  --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);

  --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);
}

.dark {
  /* Custom values */

  --transparent: transparent;

  --neutral-000: oklch(1 0 0);
  --neutral-100: oklch(0.9702 0 0);
  --neutral-150: oklch(0.9128 0 0);
  --neutral-200: oklch(0.8266 0 0);
  --neutral-300: oklch(0.738 0 0);
  --neutral-400: oklch(0.6434 0 0);
  --neutral-450: oklch(0.6 0 0);
  --neutral-500: oklch(0.5486 0 0);
  --neutral-600: oklch(0.4495 0 0);
  --neutral-650: oklch(0.425 0 0);
  --neutral-700: oklch(0.3407 0 0);
  --neutral-750: oklch(0.2972 0 0);
  --neutral-800: oklch(0.2264 0 0);
  --neutral-900: oklch(0 0 0);

  --background: var(--neutral-750);
  --background-reversed: var(--neutral-000);
  --base: var(--neutral-750);
  --text: var(--neutral-000);
  --text-alt: var(--neutral-900);
  --text-input: var(--text);
  --text-muted-input: var(--neutral-450);
  --text-muted: var(--neutral-300);
  --muted-input: var(--neutral-500);
  --background-disabled: var(--neutral-500);
  --text-disabled: var(--neutral-700);

  --primary: oklch(0.6568 0.1358 74.86);
  --hover-primary: oklch(0.6568 0.1358 74.86 / 0.8);
  --active-primary: oklch(0.5274 0.0997 78.52);
  --disabled-primary: oklch(0.6568 0.1358 74.86 / 0.4);

  --secondary: oklch(0.6065 0.213 271.11);
  --hover-secondary: oklch(0.6065 0.213 271.11 / 0.8);
  --active-secondary: oklch(0.4471 0.15 271.61);
  --disabled-secondary: oklch(0.6065 0.213 271.11 / 0.4);

  --muted: var(--color-neutral-650);
  --hover-muted: var(--color-neutral-500);
  --active-muted: var(--color-neutral-400);
  --disabled-muted: var(--color-neutral-400);

  --card: var(--neutral-750);

  /* ------------------- */

  --foreground: oklch(0.985 0.002 247.839);

  --card-foreground: oklch(0.985 0.002 247.839);

  --popover: oklch(0.21 0.034 264.665);

  --popover-foreground: oklch(0.985 0.002 247.839);

  --primary-foreground: oklch(0.21 0.034 264.665);

  --popover-hover: var(--neutral-700);

  --secondary-foreground: oklch(0.985 0.002 247.839);

  --muted-foreground: oklch(0.707 0.022 261.325);

  --accent: oklch(0.278 0.033 256.848);

  --accent-foreground: oklch(0.985 0.002 247.839);

  --destructive: oklch(0.704 0.191 22.216);

  --border: oklch(1 0 0 / 10%);

  --input: oklch(1 0 0 / 15%);

  --ring: oklch(0.551 0.027 264.364);

  --chart-1: oklch(0.488 0.243 264.376);

  --chart-2: oklch(0.696 0.17 162.48);

  --chart-3: oklch(0.769 0.188 70.08);

  --chart-4: oklch(0.627 0.265 303.9);

  --chart-5: oklch(0.645 0.246 16.439);

  --sidebar: var(--background);

  --sidebar-foreground: var(--text);

  --sidebar-primary: oklch(0.488 0.243 264.376);

  --sidebar-primary-foreground: var(--text);

  --sidebar-accent: oklch(0.278 0.033 256.848);

  --sidebar-accent-foreground: var(--text);

  --sidebar-border: oklch(1 0 0 / 10%);

  --sidebar-ring: oklch(0.551 0.027 264.364);
}

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

/* Fix for swagger ui readability */
body:has(.swagger-ui) {
  @apply bg-white text-black;
}