@import "tailwindcss";

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

    --color-primary: var(--site-primary, #4e4feb);
    --color-primary-hover: var(--site-primary-hover, #3d3edc);
    --color-success: var(--site-success, #22c55e);
    --color-danger: var(--site-danger, #ef4444);

    /* Backgrounds */
    --color-bg-light: var(--site-bg-light, #f2f7fb);
    --color-bg-dark: var(--site-bg-dark, #0f172a);
    --color-card-light: var(--site-card-light, #ffffff);
    --color-card-dark: var(--site-card-dark, #1a233a);

    /* Typography */
    --color-text-main: var(--site-text-main, #111827);
    --color-text-body: var(--site-text-body, #4b5563);
    --color-text-dark-main: var(--site-text-dark-main, #ffffff);
    --color-text-dark-body: var(--site-text-dark-body, #94a3b8);

    --color-primary-500: var(--site-primary, #4e4feb);

    --animate-bell-pulse: bell-pulse 2s infinite;

    @keyframes bell-pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.7);
        }
        70% {
            box-shadow: 0 0 0 15px rgba(253, 224, 71, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(253, 224, 71, 0);
        }
    }
}

/* 
   Enable class-based dark mode in Tailwind v4 
   This variant allows 'dark:' classes to work when '.dark' is on an ancestor (like html)
*/
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 5rem;
    }

    body {
        background-color: var(--color-bg-light);
        color: var(--color-text-body);
        @apply transition-colors duration-300;
        font-family: var(--font-sans);
    }
}

/* Zebra Striping for Tables */
tbody tr:nth-child(odd) {
    background-color: white;
}

tbody tr:nth-child(even) {
    background-color: rgb(239 246 255 / 0.2);
    /* blue-50 with 20% opacity */
}

.dark tbody tr:nth-child(odd) {
    background-color: transparent;
}

.dark tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Hover states */
tbody tr:hover {
    background-color: rgb(248 250 252 / 0.5) !important;
    /* slate-50 with 50% opacity */
}

.dark tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}