/*
This file contains custom CSS classes that are not part of the main Tailwind build.
It should be included in your main layout file after the primary stylesheet.
*/

.text-xl-plus{
    font-size: 1.1rem;
    line-height: 2rem;
}
.bg-lightpink{
    background-color: #ffa4f9;
    color: #1c1c1c;
}

.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
}

.bg-blue-500 {
    --tw-text-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-text-opacity));
    color: #ffffff;
}

/* --- New Custom Color Palette --- */

/* --- Indigo (for primary actions, buttons, links) --- */
.text-indigo-500 {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity)); /* #6366f1 */
}
.bg-indigo-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity)); /* #6366f1 */
    color: #ffffff;
}

/* --- Teal (for success, info, highlights) --- */
.text-teal-500 {
    --tw-text-opacity: 1;
    color: rgb(20 184 166 / var(--tw-text-opacity)); /* #14b8a6 */
}
.bg-teal-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(20 184 166 / var(--tw-bg-opacity)); /* #14b8a6 */
    color: #ffffff;
}

/* --- Orange (for warnings, alerts) --- */
.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity)); /* #f97316 */
}
.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity)); /* #f97316 */
    color: #ffffff;
}

/* --- Slate (versatile grays for text and backgrounds) --- */
.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity)); /* #64748b */
}
.bg-slate-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity)); /* #f1f5f9 */
}
.bg-slate-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity)); /* #334155 */
    color: #ffffff;
}

/* --- Pale Green (for informational messages, tags) --- */
.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity)); /* #dcfce7 */
}
.text-green-800 {
    color: rgb(22 101 52);
}

/* --- Pale Yellow (for highlights, notes) --- */
.bg-yellow-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity)); /* #fef9c3 */
}
.text-yellow-800 {
    color: rgb(133 77 14);
}

/* --- Pale Sky Blue (for general info, UI elements) --- */
.bg-sky-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 242 254 / var(--tw-bg-opacity)); /* #e0f2fe */
}
.text-sky-800 {
    color: rgb(7 89 133);
}

/* --- Dark mode select dropdowns (todo + snow consistency) --- */
select.form-select option {
    background-color: #0f172a;
    color: #e2e8f0;
}