/* ==========================================================================
   Base Variables & Utilities
   ========================================================================== */

:root {
    /* Colors */
    --color-brand-primary: #5837D9;
    --color-brand-primary-mid: #3B8AEA;
    --color-brand-primary-light: #1FDDFA;
    --color-primary: #022840;
    --color-primary-light: #3657D9;
    --color-primary-lighter: #32739d;
    --color-primary-icon-cta: #158edb;
    --color-success: #2fcb79;
    --color-remove: #f06292;
    --color-error: #db273f;
    --color-warning: #9c0029;
    --color-grey-light: #e5e7eb;
    --color-grey-medium: #697586;
    --color-grey-dark: #293141;
    --color-text-primary: #111827;
    --color-text-secondary: #64748b;
    --color-background: #ffffff;
    --color-background-alt: #f8fafc;
    --color-background-secondary: #f9fafa;
    --color-tag-background: #30c577;
    --color-tag-border: #22a761;
    --color-remaining-tag-background: #3b8aea;
    --color-remaining-tag-border: #3078d1;
    --color-highlight-background: #f9ffe6c4;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 100px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* AI Coloring */
    --ai-text-shadow: 0px 0px 15px rgba(226, 65, 251, 0.50);
    --ai-background: linear-gradient(90deg, #00fffd 0%, #000 241.89%);

    /* Blur */
    --blur-sm: 3px;
    --blur-md: 8px;
    --blur-lg: 15px;
    --blur-xl: 20px;
    --blur-2xl: 25px;
    

}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* Spacing Utilities */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }

/* Width & Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Transitions */
.transition-all { transition: all var(--transition-normal); }
.transition-fast { transition: all var(--transition-fast); }

/* Colors */
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-grey-light { color: var(--color-grey-light); }
.text-grey-medium { color: var(--color-grey-medium); }
.text-grey-dark { color: var(--color-grey-dark); }
.text-primary-light { color: var(--color-primary-light); }
.text-primary-lighter { color: var(--color-primary-lighter); }

.bg-primary { background-color: var(--color-primary); }
.bg-success { background-color: var(--color-success); }
.bg-error { background-color: var(--color-error); }
.bg-warning { background-color: var(--color-warning); }
.bg-grey-light { background-color: var(--color-grey-light); }
.bg-grey-medium { background-color: var(--color-grey-medium); }
.bg-grey-dark { background-color: var(--color-grey-dark); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-primary-lighter { background-color: var(--color-primary-lighter); }
.bg-background { background-color: var(--color-background); }
.bg-background-alt { background-color: var(--color-background-alt); }

/* Border Colors */
.border-primary { border-color: var(--color-primary); }
.border-success { border-color: var(--color-success); }
.border-error { border-color: var(--color-error); }
.border-warning { border-color: var(--color-warning); }
.border-grey-light { border-color: var(--color-grey-light); }
.border-grey-medium { border-color: var(--color-grey-medium); }
.border-grey-dark { border-color: var(--color-grey-dark); }
.border-primary-light { border-color: var(--color-primary-light); }
.border-primary-lighter { border-color: var(--color-primary-lighter); }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-wait { cursor: wait; }
.cursor-not-allowed { cursor: not-allowed; }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Visibility */
.invisible { visibility: hidden; }
.visible { visibility: visible; }

/* Pointer Events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* Transform */
.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-0 { --tw-translate-x: 0; }
.translate-y-0 { --tw-translate-y: 0; }
.scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; }
.scale-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; }
.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }

/* Animation */
.animate-pulse {
    animation: pulse 1.5s infinite;
}

.animate-shimmer {
    animation: shimmer 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}