frontend/src/index.css

@import "tailwindcss";

@theme {
  /* Tokyo Night Light - Background and Foreground */
  --color-background: #e6e7ed;
  --color-foreground: #343b58;

  /* Tokyo Night Light - Primary (8C4351 - HSL: 0.97, 0.35, 0.41) */
  --color-primary-50: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 45%)
  );
  --color-primary-100: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 40%)
  );
  --color-primary-200: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 30%)
  );
  --color-primary-300: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 20%)
  );
  --color-primary-400: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 10%)
  );
  --color-primary-500: #8c4351;
  --color-primary-600: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% - 5%)
  );
  --color-primary-700: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% - 10%)
  );
  --color-primary-800: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% - 15%)
  );
  --color-primary-900: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% - 20%)
  );

  /* Tokyo Night Light - Secondary (343b58 - HSL: 0.63, 0.26, 0.29) */
  --color-secondary-50: hsl(
    calc(0.63 * 360),
    calc(0.26 * 100%),
    calc(0.29 * 100% + 55%)
  );
  --color-secondary-100: hsl(
    calc(0.63 * 360),
    calc(0.26 * 100%),
    calc(0.29 * 100% + 45%)
  );
  --color-secondary-200: hsl(
    calc(0.63 * 360),
    calc(0.26 * 100%),
    calc(0.29 * 100% + 35%)
  );
  --color-secondary-300: hsl(
    calc(0.63 * 360),
    calc(0.26 * 100%),
    calc(0.29 * 100% + 25%)
  );
  --color-secondary-400: hsl(
    calc(0.63 * 360),
    calc(0.26 * 100%),
    calc(0.29 * 100% + 15%)
  );
  --color-secondary-500: hsl(
    calc(0.63 * 360),
    calc(0.26 * 100%),
    calc(0.29 * 100% + 5%)
  );
  --color-secondary-600: #343b58;
  --color-secondary-700: hsl(
    calc(0.63 * 360),
    calc(0.26 * 100%),
    calc(0.29 * 100% - 5%)
  );
  --color-secondary-800: hsl(
    calc(0.63 * 360),
    calc(0.26 * 100%),
    calc(0.29 * 100% - 10%)
  );
  --color-secondary-900: hsl(
    calc(0.63 * 360),
    calc(0.26 * 100%),
    calc(0.29 * 100% - 15%)
  );

  /* Tokyo Night Light - Accent (2959aa - HSL: 0.60, 0.61, 0.41) */
  --color-accent-50: hsl(
    calc(0.6 * 360),
    calc(0.61 * 100%),
    calc(0.41 * 100% + 45%)
  );
  --color-accent-100: hsl(
    calc(0.6 * 360),
    calc(0.61 * 100%),
    calc(0.41 * 100% + 40%)
  );
  --color-accent-200: hsl(
    calc(0.6 * 360),
    calc(0.61 * 100%),
    calc(0.41 * 100% + 30%)
  );
  --color-accent-300: hsl(
    calc(0.6 * 360),
    calc(0.61 * 100%),
    calc(0.41 * 100% + 20%)
  );
  --color-accent-400: hsl(
    calc(0.6 * 360),
    calc(0.61 * 100%),
    calc(0.41 * 100% + 10%)
  );
  --color-accent-500: #2959aa;
  --color-accent-600: hsl(
    calc(0.6 * 360),
    calc(0.61 * 100%),
    calc(0.41 * 100% - 5%)
  );
  --color-accent-700: hsl(
    calc(0.6 * 360),
    calc(0.61 * 100%),
    calc(0.41 * 100% - 10%)
  );
  --color-accent-800: hsl(
    calc(0.6 * 360),
    calc(0.61 * 100%),
    calc(0.41 * 100% - 15%)
  );
  --color-accent-900: hsl(
    calc(0.6 * 360),
    calc(0.61 * 100%),
    calc(0.41 * 100% - 20%)
  );

  /* Red color scheme (8C4351 - HSL: 0.97, 0.35, 0.41) */
  --color-red-50: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 45%)
  );
  --color-red-100: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 35%)
  );
  --color-red-200: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 25%)
  );
  --color-red-300: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 15%)
  );
  --color-red-400: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% + 5%)
  );
  --color-red-500: #8c4351;
  --color-red-600: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% - 5%)
  );
  --color-red-700: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% - 10%)
  );
  --color-red-800: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% - 15%)
  );
  --color-red-900: hsl(
    calc(0.97 * 360),
    calc(0.35 * 100%),
    calc(0.41 * 100% - 20%)
  );

  /* Green color scheme (385f0d - HSL: 0.25, 0.76, 0.21) */
  --color-green-50: hsl(
    calc(0.25 * 360),
    calc(0.76 * 100%),
    calc(0.21 * 100% + 60%)
  );
  --color-green-100: hsl(
    calc(0.25 * 360),
    calc(0.76 * 100%),
    calc(0.21 * 100% + 50%)
  );
  --color-green-200: hsl(
    calc(0.25 * 360),
    calc(0.76 * 100%),
    calc(0.21 * 100% + 40%)
  );
  --color-green-300: hsl(
    calc(0.25 * 360),
    calc(0.76 * 100%),
    calc(0.21 * 100% + 30%)
  );
  --color-green-400: hsl(
    calc(0.25 * 360),
    calc(0.76 * 100%),
    calc(0.21 * 100% + 20%)
  );
  --color-green-500: #385f0d;
  --color-green-600: hsl(
    calc(0.25 * 360),
    calc(0.76 * 100%),
    calc(0.21 * 100% - 3%)
  );
  --color-green-700: hsl(
    calc(0.25 * 360),
    calc(0.76 * 100%),
    calc(0.21 * 100% - 6%)
  );
  --color-green-800: hsl(
    calc(0.25 * 360),
    calc(0.76 * 100%),
    calc(0.21 * 100% - 9%)
  );
  --color-green-900: hsl(
    calc(0.25 * 360),
    calc(0.76 * 100%),
    calc(0.21 * 100% - 12%)
  );
}

:root {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent-500);
  border-radius: 4px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-600);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-500) transparent;
}