ConvertX/src/main.css

@import "tailwindcss";

@plugin "tailwind-scrollbar";

@theme {
  --color-contrast: var(--contrast);
  --color-neutral-900: var(--neutral-900);
  --color-neutral-800: var(--neutral-800);
  --color-neutral-700: var(--neutral-700);
  --color-neutral-600: var(--neutral-600);
  --color-neutral-500: var(--neutral-500);
  --color-neutral-400: var(--neutral-400);
  --color-neutral-300: var(--neutral-300);
  --color-neutral-200: var(--neutral-200);
  --color-neutral-100: var(--neutral-100);
  --color-accent-600: var(--accent-600);
  --color-accent-500: var(--accent-500);
  --color-accent-400: var(--accent-400);
}

@utility article {
  @apply px-2 sm:px-4 py-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded-sm;
}

@utility btn-primary {
  @apply bg-accent-500 text-contrast rounded-sm p-2 sm:p-4 hover:bg-accent-400 cursor-pointer transition-colors;
}

@utility btn-secondary {
  @apply bg-neutral-400 text-contrast rounded-sm p-2 sm:p-4 hover:bg-neutral-300 cursor-pointer transition-colors;
}

:root {
  /* Light mode */
  --contrast: oklch(100% 0 0);
  /* Neutral colors - Gray */
  --neutral-950: oklch(98.5% 0.002 247.839);
  --neutral-900: oklch(96.7% 0.003 264.542);
  --neutral-800: oklch(92.8% 0.006 264.531);
  --neutral-700: oklch(87.2% 0.01 258.338);
  --neutral-600: oklch(70.7% 0.022 261.325);
  --neutral-500: oklch(55.1% 0.027 264.364);
  --neutral-400: oklch(44.6% 0.03 256.802);
  --neutral-300: oklch(37.3% 0.034 259.733);
  --neutral-200: oklch(26.9% 0 0);
  --neutral-100: oklch(21% 0.034 264.665);
  --neutral-50: oklch(13% 0.028 261.692);
  /* lime-700 */
  --accent-600: oklch(53.2% 0.157 131.589);
  /* lime-600 */
  --accent-500: oklch(64.8% 0.2 131.684);
  /* lime-500 */
  --accent-400: oklch(76.8% 0.233 130.85);
}

@media (prefers-color-scheme: dark) {
  /* Dark mode */
  :root {
    --contrast: oklch(0% 0 0);
    /* Neutral colors - Gray */
    --neutral-950: oklch(13% 0.028 261.692);
    --neutral-900: oklch(21% 0.034 264.665);
    --neutral-800: oklch(27.8% 0.033 256.848);
    --neutral-700: oklch(37.3% 0.034 259.733);
    --neutral-600: oklch(44.6% 0.03 256.802);
    --neutral-500: oklch(55.1% 0.027 264.364);
    --neutral-400: oklch(70.7% 0.022 261.325);
    --neutral-300: oklch(87.2% 0.01 258.338);
    --neutral-200: oklch(92.8% 0.006 264.531);
    --neutral-100: oklch(96.7% 0.003 264.542);
    --neutral-50: oklch(98.5% 0.002 247.839);
    /* lime-600 */
    --accent-600: oklch(64.8% 0.2 131.684);
    /* lime-500 */
    --accent-500: oklch(76.8% 0.233 130.85);
    /* lime-400 */
    --accent-400: oklch(84.1% 0.238 128.85);
  }
}