/* ===== COLOR PALETTE - GRADIENT UTILITIES ===== */
/* Gradient utilities using the centralized color variables */
/* Follows CSS Guidelines for component-specific utilities */

/* ===== GRADIENT DEFINITIONS ===== */
.green-gradient {
    background: linear-gradient(135deg, var(--color-green-light) 0%, var(--color-green-medium) 100%);
}

.blue-gradient {
    background: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-blue-medium) 100%);
}

.dark-blue-gradient {
    background: linear-gradient(135deg, var(--color-blue-darkest) 0%, var(--color-blue-darker) 100%);
}

.yellow-gradient {
    background: linear-gradient(135deg, var(--color-yellow-light) 0%, var(--color-yellow-medium) 100%);
}

.red-gradient {
    background: linear-gradient(135deg, var(--color-red-light) 0%, var(--color-red-medium) 100%);
}

/* ===== DARK THEME GRADIENT OVERRIDES ===== */
[data-theme="dark"] .green-gradient {
    background: linear-gradient(135deg, var(--bg-accent), var(--color-green-dark));
}

[data-theme="dark"] .blue-gradient {
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
}

[data-theme="dark"] .dark-blue-gradient {
    background: linear-gradient(135deg, var(--bg-primary), var(--color-blue-darkest));
}

[data-theme="dark"] .yellow-gradient {
    background: linear-gradient(135deg, var(--text-accent), var(--color-yellow-medium));
}

[data-theme="dark"] .red-gradient {
    background: linear-gradient(135deg, var(--text-accent), var(--color-red-medium));
}