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

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

:root {
    --radius: 0.625rem;

    --red-theme: #ed1506;
    --background: oklch(1 0 0);

    --foreground: oklch(0.145 0 0);

    --card: oklch(1 0 0);

    --card-foreground: oklch(0.145 0 0);

    --popover: oklch(1 0 0);

    --popover-foreground: oklch(0.145 0 0);

    /* --primary: oklch(0.205 0 0);

    --primary-foreground: oklch(0.985 0 0);

    --secondary: oklch(0.97 0 0);

    --secondary-foreground: oklch(0.205 0 0); */

    --muted: oklch(0.97 0 0);

    --muted-foreground: oklch(0.556 0 0);

    --accent: oklch(0.97 0 0);

    --accent-foreground: oklch(0.205 0 0);

    --destructive: oklch(0.577 0.245 27.325);

    --border: oklch(0.922 0 0);

    --input: oklch(0.922 0 0);

    --ring: oklch(0.708 0 0);

    --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: oklch(0.985 0 0);

    --sidebar-foreground: oklch(0.145 0 0);

    --sidebar-primary: oklch(0.205 0 0);

    --sidebar-primary-foreground: oklch(0.985 0 0);

    --sidebar-accent: oklch(0.97 0 0);

    --sidebar-accent-foreground: oklch(0.205 0 0);

    --sidebar-border: oklch(0.922 0 0);

    --sidebar-ring: oklch(0.708 0 0);
    --primary: #022ffd;
    --primary-foreground: #fff;
    --secondary: #00c2ff;
    --secondary-foreground: #001b4d;
    --primary-hover: #234af6;
}

.dark {
    --red-theme: #ff4136;
    --background: oklch(0.145 0 0);

    --foreground: oklch(0.985 0 0);

    --card: oklch(0.205 0 0);

    --card-foreground: oklch(0.985 0 0);

    --popover: oklch(0.205 0 0);

    --popover-foreground: oklch(0.985 0 0);

    --primary: oklch(0.922 0 0);

    --primary-foreground: oklch(0.205 0 0);

    --secondary: oklch(0.269 0 0);

    --secondary-foreground: oklch(0.985 0 0);

    --muted: oklch(0.269 0 0);

    --muted-foreground: oklch(0.708 0 0);

    --accent: oklch(0.269 0 0);

    --accent-foreground: oklch(0.985 0 0);

    --destructive: oklch(0.704 0.191 22.216);

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

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

    --ring: oklch(0.556 0 0);

    --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: oklch(0.205 0 0);

    --sidebar-foreground: oklch(0.985 0 0);

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

    --sidebar-primary-foreground: oklch(0.985 0 0);

    --sidebar-accent: oklch(0.269 0 0);

    --sidebar-accent-foreground: oklch(0.985 0 0);

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

    --sidebar-ring: oklch(0.556 0 0);
}
@theme inline {
    --font-family-poppins: var(--font-poppins), sans-serif;
    --font-family-inter: var(--font-inter), sans-serif;

    --color-red-50: #fef2f2;
    --color-red-100: #fee2e2;
    --color-red-200: #fecaca;
    --color-red-300: #fca5a5;
    --color-red-400: #f87171;
    --color-red-500: #ed1506; /* Your main color */
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-800: #991b1b;
    --color-red-900: #7f1d1d;
    --color-red-950: #450a0a;

    /* Custom red theme */
    --color-red-theme: #ed1506;

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

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    body {
        @apply bg-background text-foreground;
        font-family: var(--font-poppins), system-ui, sans-serif;
    }
}

button {
    cursor: pointer;
}

.containers {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Responsive containers widths */
@media (min-width: 640px) {
    .containers {
        max-width: 640px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .containers {
        max-width: 768px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1024px) {
    .containers {
        max-width: 1024px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1280px) {
    .containers {
        max-width: 1280px;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* @media (min-width: 1536px) {
    .containers {
        max-width: 1536px;
    }
} */