:root {
    /* Fonts */
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

    /* --- New Color Palette (Deep Blue / Tech) --- */

    /* Light Mode Palette */
    --color-light-bg: #F8FAFC;
    --color-light-surface: #FFFFFF;
    --color-light-brand: #1D2650;
    --color-light-text-main: #03050B;
    --color-light-text-sub: #1D2650;
    --color-light-border: #E2E8F0;
    --color-light-deco: #8A98C7;

    /* Dark Mode Palette */
    --color-start-bg: #03050B;
    --color-start-surface: #1D2650;
    --color-start-hover: #2A3668;
    --color-start-accent: #3A4C97;
    --color-dark-bg: var(--color-start-bg);
    --color-dark-surface: var(--color-start-surface);
    --color-start-text-sub: #8A98C7;
    --color-start-border: rgba(138, 152, 199, 0.15);

    /* Shadows */
    --shadow-premium: 0 10px 40px -10px rgba(0, 0, 0, 0.7);
    --shadow-brand-glow: 0 4px 20px 0 rgba(58, 76, 151, 0.4);
}

* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 300ms;
}

body {
    background-color: var(--color-light-bg);
    color: var(--color-light-text-main);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

.dark body {
    background-color: var(--color-start-bg);
    color: white;
}

/* Glassmorphism */
.glass {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-light-border);
}

.dark .glass {
    background-color: rgba(29, 38, 80, 0.5);
    border: 1px solid var(--color-start-border);
}

/* Text Gradients */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to bottom right, var(--color-light-brand), var(--color-light-deco));
}

.dark .text-gradient {
    background-image: linear-gradient(to bottom right, #FFFFFF, var(--color-start-text-sub));
}

/* Button Gradients */
.brand-gradient {
    background-image: linear-gradient(to bottom right, var(--color-light-brand), var(--color-start-accent));
    color: white;
    font-weight: 600;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-light-bg);
}

.dark ::-webkit-scrollbar-track {
    background: var(--color-start-bg);
}

::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--color-start-surface);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-brand);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--color-start-accent);
}

/* Custom Utilities to match Tailwind 4 classes used in the project */
.bg-start-bg { background-color: var(--color-start-bg); }
.bg-start-surface { background-color: var(--color-start-surface); }
.bg-start-accent { background-color: var(--color-start-accent); }
.text-start-text-sub { color: var(--color-start-text-sub); }
.border-start-border { border-color: var(--color-start-border); }
.shadow-premium { box-shadow: var(--shadow-premium); }
.shadow-brand-glow { box-shadow: var(--shadow-brand-glow); }

/* --- Pagination Styles --- */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.pagination-item {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.pagination-item.active {
    background: linear-gradient(to bottom right, var(--color-light-brand), var(--color-start-accent));
    color: white;
    box-shadow: var(--shadow-brand-glow);
}

.dark .pagination-item.active {
    background: linear-gradient(135deg, var(--color-start-accent) 0%, #4F46E5 100%);
    box-shadow: 0 8px 25px -5px rgba(58, 76, 151, 0.5);
}

.pagination-item:not(.active):not(:disabled):hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.dark .pagination-item:not(.active):not(:disabled):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.pagination-item:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}

.pagination-arrow {
    background-color: var(--color-light-surface);
    border: 1px solid var(--color-light-border);
}

.dark .pagination-arrow {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}