:root {
    --primary-rgb: 237 246 59;
    --red-900-rgb: 127 29 29;
    /* Add a theme-glow rgb variable that defaults to primary color but can be overridden */
    --theme-glow-rgb: var(--primary-rgb);
    --theme-glow-color: rgb(var(--theme-glow-rgb) / 0.18);
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    
    /* Color Palette from Theme Config */
    --primary-50: #fefff0;
    --primary-100: #fdfee1;
    --primary-200: #f9fcc0;
    --primary-300: #f3f7a1;
    --primary-400: #ebf17e;
    --primary-500: #edf63bff;
    --primary-600: #dce43f;
    --primary-700: #d0d926;
    --primary-800: #aeb526;
    --primary-900: #8e9325;
    
    --background-body: #0D0D0D;
    --background-dark: #1A1A1A;
    --background-light: #2C2C2C;
    --text-main: #FFFFFF;
    --text-muted: #A0A0A0;
}

.text-primary {
    color: rgb(var(--primary-rgb) / var(--tw-text-opacity)) !important;
}

.bg-primary {
    background-color: rgb(var(--primary-rgb) / var(--tw-bg-opacity)) !important;
}

.border-primary {
    border-color: rgb(var(--primary-rgb) / 1) !important;
}

/* Opacity variants */
.bg-primary\/5 { background-color: rgb(var(--primary-rgb) / 0.05) !important; }
.bg-primary\/10 { background-color: rgb(var(--primary-rgb) / 0.1) !important; }
.bg-primary\/20 { background-color: rgb(var(--primary-rgb) / 0.2) !important; }
.bg-primary\/30 { background-color: rgb(var(--primary-rgb) / 0.3) !important; }
.bg-primary\/40 { background-color: rgb(var(--primary-rgb) / 0.4) !important; }
.bg-primary\/50 { background-color: rgb(var(--primary-rgb) / 0.5) !important; }
.bg-primary\/60 { background-color: rgb(var(--primary-rgb) / 0.6) !important; }
.bg-primary\/70 { background-color: rgb(var(--primary-rgb) / 0.7) !important; }
.bg-primary\/80 { background-color: rgb(var(--primary-rgb) / 0.8) !important; }
.bg-primary\/90 { background-color: rgb(var(--primary-rgb) / 0.9) !important; }

.text-primary\/5 { color: rgb(var(--primary-rgb) / 0.05) !important; }
.text-primary\/10 { color: rgb(var(--primary-rgb) / 0.1) !important; }
.text-primary\/20 { color: rgb(var(--primary-rgb) / 0.2) !important; }
.text-primary\/30 { color: rgb(var(--primary-rgb) / 0.3) !important; }
.text-primary\/40 { color: rgb(var(--primary-rgb) / 0.4) !important; }
.text-primary\/50 { color: rgb(var(--primary-rgb) / 0.5) !important; }
.text-primary\/60 { color: rgb(var(--primary-rgb) / 0.6) !important; }
.text-primary\/70 { color: rgb(var(--primary-rgb) / 0.7) !important; }
.text-primary\/80 { color: rgb(var(--primary-rgb) / 0.8) !important; }
.text-primary\/90 { color: rgb(var(--primary-rgb) / 0.9) !important; }

/* Red color variants */
.bg-red-900 { background-color: rgb(var(--red-900-rgb) / var(--tw-bg-opacity)) !important; }
.text-red-900 { color: rgb(var(--red-900-rgb) / var(--tw-text-opacity)) !important; }

/* Red color with opacity */
.bg-red-900\/5 { background-color: rgb(var(--red-900-rgb) / 0.05) !important; }
.bg-red-900\/10 { background-color: rgb(var(--red-900-rgb) / 0.1) !important; }
.bg-red-900\/20 { background-color: rgb(var(--red-900-rgb) / 0.2) !important; }
.bg-red-900\/30 { background-color: rgb(var(--red-900-rgb) / 0.3) !important; }
.bg-red-900\/40 { background-color: rgb(var(--red-900-rgb) / 0.4) !important; }
.bg-red-900\/50 { background-color: rgb(var(--red-900-rgb) / 0.5) !important; }
.bg-red-900\/60 { background-color: rgb(var(--red-900-rgb) / 0.6) !important; }
.bg-red-900\/70 { background-color: rgb(var(--red-900-rgb) / 0.7) !important; }
.bg-red-900\/80 { background-color: rgb(var(--red-900-rgb) / 0.8) !important; }
.bg-red-900\/90 { background-color: rgb(var(--red-900-rgb) / 0.9) !important; }

/* تعريف الألوان الأساسية وتدرجاتها */
.text-primary-50 { color: var(--primary-50) !important; }
.text-primary-100 { color: var(--primary-100) !important; }
.text-primary-200 { color: var(--primary-200) !important; }
.text-primary-300 { color: var(--primary-300) !important; }
.text-primary-400 { color: var(--primary-400) !important; }
.text-primary-500, .text-primary { color: var(--primary-500) !important; }
.text-primary-600 { color: var(--primary-600) !important; }
.text-primary-700 { color: var(--primary-700) !important; }
.text-primary-800 { color: var(--primary-800) !important; }
.text-primary-900 { color: var(--primary-900) !important; }

.bg-primary-50 { background-color: var(--primary-50) !important; }
.bg-primary-100 { background-color: var(--primary-100) !important; }
.bg-primary-200 { background-color: var(--primary-200) !important; }
.bg-primary-300 { background-color: var(--primary-300) !important; }
.bg-primary-400 { background-color: var(--primary-400) !important; }
.bg-primary-500, .bg-primary { background-color: var(--primary-500) !important; }
.bg-primary-600 { background-color: var(--primary-600) !important; }
.bg-primary-700 { background-color: var(--primary-700) !important; }
.bg-primary-800 { background-color: var(--primary-800) !important; }
.bg-primary-900 { background-color: var(--primary-900) !important; }

.border-primary-50 { border-color: var(--primary-50) !important; }
.border-primary-100 { border-color: var(--primary-100) !important; }
.border-primary-200 { border-color: var(--primary-200) !important; }
.border-primary-300 { border-color: var(--primary-300) !important; }
.border-primary-400 { border-color: var(--primary-400) !important; }
.border-primary-500, .border-primary { border-color: var(--primary-500) !important; }
.border-primary-600 { border-color: var(--primary-600) !important; }
.border-primary-700 { border-color: var(--primary-700) !important; }
.border-primary-800 { border-color: var(--primary-800) !important; }
.border-primary-900 { border-color: var(--primary-900) !important; }

/* تأثيرات الألوان */
.hover\:bg-primary-50:hover { background-color: var(--primary-50) !important; }
.hover\:bg-primary-100:hover { background-color: var(--primary-100) !important; }
.hover\:bg-primary-200:hover { background-color: var(--primary-200) !important; }
.hover\:bg-primary-300:hover { background-color: var(--primary-300) !important; }
.hover\:bg-primary-400:hover { background-color: var(--primary-400) !important; }
.hover\:bg-primary-500:hover, .hover\:bg-primary:hover { background-color: var(--primary-500) !important; }
.hover\:bg-primary-600:hover { background-color: var(--primary-600) !important; }
.hover\:bg-primary-700:hover { background-color: var(--primary-700) !important; }
.hover\:bg-primary-800:hover { background-color: var(--primary-800) !important; }
.hover\:bg-primary-900:hover { background-color: var(--primary-900) !important; }

body {
    background-color: var(--background-body);
    color: var(--text-main);
}

/* Accessible input defaults used across the app */
.form-input,
.redeem-input,
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
    color: var(--text-main);
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.form-input::placeholder,
.redeem-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: rgba(255,255,255,0.45);
}

.form-input:focus,
.redeem-input:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgb(var(--primary-rgb));
    box-shadow: 0 6px 24px rgba(var(--theme-glow-rgb), 0.14), 0 0 0 3px rgb(var(--theme-glow-rgb) / 0.12);
}

/* Utility shadow that uses the theme glow color */
.shadow-theme-glow {
    box-shadow: 0 8px 26px rgb(var(--theme-glow-rgb) / 0.14), 0 2px 6px rgb(var(--theme-glow-rgb) / 0.06) !important;
}