frontend/app/app.css.converted

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

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

@theme {
    --font-sans:
        "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html,
body {
    @apply bg-indigo-100 text-gray-900 dark:bg-gray-900 dark:text-white;

    @media (prefers-color-scheme: dark) {
        color-scheme: dark;
    }
}

@theme inline {
    --radius-sm:
        calc(var(--radius) - 4px);
    --radius-md:
        calc(var(--radius) - 2px);
    --radius-lg:
        var(--radius);
    --radius-xl:
        calc(var(--radius) + 4px);
    --radius-2xl:
        calc(var(--radius) + 8px);
    --radius-3xl:
        calc(var(--radius) + 12px);
    --radius-4xl:
        calc(var(--radius) + 16px);
    --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-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);
}

:root {
    --radius:
        0.625rem;
    --background:
        rgb(255, 255, 255);
    --foreground:
        rgb(3, 7, 18);
    --card:
        rgb(255, 255, 255);
    --card-foreground:
        rgb(3, 7, 18);
    --popover:
        rgb(255, 255, 255);
    --popover-foreground:
        rgb(3, 7, 18);
    --primary:
        rgb(16, 24, 40);
    --primary-foreground:
        rgb(249, 250, 251);
    --secondary:
        rgb(243, 244, 246);
    --secondary-foreground:
        rgb(16, 24, 40);
    --muted:
        rgb(243, 244, 246);
    --muted-foreground:
        rgb(106, 114, 130);
    --accent:
        rgb(243, 244, 246);
    --accent-foreground:
        rgb(16, 24, 40);
    --destructive:
        rgb(231, 0, 11);
    --border:
        rgb(229, 231, 235);
    --input:
        rgb(229, 231, 235);
    --ring:
        rgb(153, 161, 175);
    --chart-1:
        rgb(245, 73, 0);
    --chart-2:
        rgb(0, 150, 137);
    --chart-3:
        rgb(16, 78, 100);
    --chart-4:
        rgb(255, 185, 0);
    --chart-5:
        rgb(254, 154, 0);
    --sidebar:
        hsl(0 0% 98%);
    --sidebar-foreground:
        hsl(240 5.3% 26.1%);
    --sidebar-primary:
        hsl(240 5.9% 10%);
    --sidebar-primary-foreground:
        hsl(0 0% 98%);
    --sidebar-accent:
        hsl(240 4.8% 95.9%);
    --sidebar-accent-foreground:
        hsl(240 5.9% 10%);
    --sidebar-border:
        hsl(220 13% 91%);
    --sidebar-ring:
        hsl(217.2 91.2% 59.8%);
}

.dark {
    --background:
        rgb(3, 7, 18);
    --foreground:
        rgb(249, 250, 251);
    --card:
        rgb(16, 24, 40);
    --card-foreground:
        rgb(249, 250, 251);
    --popover:
        rgb(16, 24, 40);
    --popover-foreground:
        rgb(249, 250, 251);
    --primary:
        rgb(229, 231, 235);
    --primary-foreground:
        rgb(16, 24, 40);
    --secondary:
        rgb(30, 41, 57);
    --secondary-foreground:
        rgb(249, 250, 251);
    --muted:
        rgb(30, 41, 57);
    --muted-foreground:
        rgb(153, 161, 175);
    --accent:
        rgb(30, 41, 57);
    --accent-foreground:
        rgb(249, 250, 251);
    --destructive:
        rgb(255, 100, 103);
    --border:
        rgba(255, 255, 255, 0.100);
    --input:
        rgba(255, 255, 255, 0.150);
    --ring:
        rgb(106, 114, 130);
    --chart-1:
        rgb(20, 71, 230);
    --chart-2:
        rgb(0, 188, 125);
    --chart-3:
        rgb(254, 154, 0);
    --chart-4:
        rgb(173, 70, 255);
    --chart-5:
        rgb(255, 32, 86);
    --sidebar:
        hsl(240 5.9% 10%);
    --sidebar-foreground:
        hsl(240 4.8% 95.9%);
    --sidebar-primary:
        hsl(224.3 76.3% 48%);
    --sidebar-primary-foreground:
        hsl(0 0% 100%);
    --sidebar-accent:
        hsl(240 3.7% 15.9%);
    --sidebar-accent-foreground:
        hsl(240 4.8% 95.9%);
    --sidebar-border:
        hsl(240 3.7% 15.9%);
    --sidebar-ring:
        hsl(217.2 91.2% 59.8%);
}

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