:root {
    /* ===== Brand Colors ===== */
    --primary-color: #3dc5b8;
    /* Main brand color */
    --primary-color-dark: #36867c;
    --primary-color-light: #b7e3dd;

    --accent-color: #ff9525;
    /* Call-to-action, highlights */
    --accent-color-dark: #cc660d;
    --accent-color-light: #ffd2a6;

    /* ===== Neutral Colors ===== */
    --background-color: #ffffff;
    --background-alt-color: #f5f7fa;
    --surface-color: #f0f2f5;
    --border-color: #dcdfe4;
    --text-color: #1a1a1a;
    --text-secondary-color: #555555;
    --placeholder-color: #9a9a9a;

    /* ===== Success / Error / Info ===== */
    --success-color: #2ecc71;
    --error-color: #e74c3c;
    --warning-color: #f1c40f;
    --info-color: #3498db;

    /* ===== Typography ===== */
    --font-family-base: 'Inter', 'Segoe UI', sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;

    --heading-color: #222222;
    --link-color: var(--primary-color);
    --link-hover-color: var(--accent-color);

    /* ===== Spacing & Layout ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* ===== Shadows ===== */
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* ===== Transitions ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;

    /* ===== Z-Index ===== */
    --z-header: 1000;
    --z-dropdown: 1100;
    --z-modal: 1200;
    --z-toast: 1300;
}

::selection{
    background-color: var(--primary-color);
    color: var(--background-color);;
}

/* app.css or your Tailwind file */
.pagination{
    margin: 20px 5px;
}
.pagination nav span,
.pagination nav a {
    background-color: white;
    border: #ebe6e7;
    color: #222222;
}
.pagination span[aria-current="page"] span{
    background-color: var(--accent-color);
    color:white;
}
.pagination nav a:hover {
    background-color: #e2e2e2;
}