/* Tailwind CSS v4 Extensions for Custom Classes */

/* CSS Variables for Yale Colors - Used by @theme directive */
:root {
    --color-yale-50: #e8f4fd;
    --color-yale-100: #d0eafb;
    --color-yale-200: #a1d5f7;
    --color-yale-300: #72bff3;
    --color-yale-400: #43aaef;
    --color-yale-500: #1495eb;
    --color-yale-600: #1077bc;
    --color-yale-700: #0c598d;
    --color-yale-800: #083c5e;
    --color-yale-900: #041e2f;
    --color-yale-950: #031521;
}

/* Custom Tailwind Component Classes for unsupported spacing values */

/* Custom margin utilities */
.mx-30 {
    margin-left: 7.5rem;
    margin-right: 7.5rem;
}

.mx-25 {
    margin-left: 6.25rem;
    margin-right: 6.25rem;
}

.ml-30 {
    margin-left: 7.5rem;
}

.mr-30 {
    margin-right: 7.5rem;
}

.my-25 {
    margin-top: 6.25rem;
    margin-bottom: 6.25rem;
}

.mr-10 {
    margin-right: 2.5rem;
}

/* Custom padding utilities */
.px-15 {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
}

.py-15 {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}

.px-30 {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
}

/* Custom max-width utilities */
.max-w-85 {
    max-width: 21.25rem;
}

.max-h-100 {
    max-height: 25rem;
}

/* Custom width/height utilities */
.w-100 {
    width: 25rem;
}

.h-100 {
    height: 25rem;
}

/* Custom positioning utilities */
.bottom-30 {
    bottom: 7.5rem;
}

.bottom-15 {
    bottom: 3.75rem;
}

/* Font family utilities */
.font-inter {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.font-montserrat {
    font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.font-playfair {
    font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
}

/* Background utilities for yale colors */
.bg-yale-50 {
    background-color: rgb(232 244 253);
}

.bg-yale-100 {
    background-color: rgb(208 234 251);
}

.bg-yale-200 {
    background-color: rgb(161 213 247);
}

.bg-yale-300 {
    background-color: rgb(114 191 243);
}

.bg-yale-400 {
    background-color: rgb(67 170 239);
}

.bg-yale-500 {
    background-color: rgb(20 149 235);
}

.bg-yale-600 {
    background-color: rgb(16 119 188);
}

.bg-yale-700 {
    background-color: rgb(12 89 141);
}

.bg-yale-800 {
    background-color: rgb(8 60 94);
}

.bg-yale-900 {
    background-color: rgb(4 30 47);
}

.bg-yale-950 {
    background-color: rgb(3 21 33);
}

/* Color text utilities */
.text-yale-50 {
    color: rgb(232 244 253);
}

.text-yale-100 {
    color: rgb(208 234 251);
}

.text-yale-200 {
    color: rgb(161 213 247);
}

.text-yale-300 {
    color: rgb(114 191 243);
}

.text-yale-400 {
    color: rgb(67 170 239);
}

.text-yale-500 {
    color: rgb(20 149 235);
}

.text-yale-600 {
    color: rgb(16 119 188);
}

.text-yale-700 {
    color: rgb(12 89 141);
}

.text-yale-800 {
    color: rgb(8 60 94);
}

.text-yale-900 {
    color: rgb(4 30 47);
}

.text-yale-950 {
    color: rgb(3 21 33);
}

/* Color utilities - direct mapping for color-yale-* */
.color-yale-50 {
    color: rgb(232 244 253);
}

.color-yale-100 {
    color: rgb(208 234 251);
}

.color-yale-200 {
    color: rgb(161 213 247);
}

.color-yale-300 {
    color: rgb(114 191 243);
}

.color-yale-400 {
    color: rgb(67 170 239);
}

.color-yale-500 {
    color: rgb(20 149 235);
}

.color-yale-600 {
    color: rgb(16 119 188);
}

.color-yale-700 {
    color: rgb(12 89 141);
}

.color-yale-800 {
    color: rgb(8 60 94);
}

.color-yale-900 {
    color: rgb(4 30 47);
}

.color-yale-950 {
    color: rgb(3 21 33);
}

/* Border utilities for yale colors */
.border-yale-50 {
    border-color: rgb(232 244 253);
}

.border-yale-100 {
    border-color: rgb(208 234 251);
}

.border-yale-200 {
    border-color: rgb(161 213 247);
}

.border-yale-300 {
    border-color: rgb(114 191 243);
}

.border-yale-400 {
    border-color: rgb(67 170 239);
}

.border-yale-500 {
    border-color: rgb(20 149 235);
}

.border-yale-600 {
    border-color: rgb(16 119 188);
}

.border-yale-700 {
    border-color: rgb(12 89 141);
}

.border-yale-800 {
    border-color: rgb(8 60 94);
}

.border-yale-900 {
    border-color: rgb(4 30 47);
}

.border-yale-950 {
    border-color: rgb(3 21 33);
}

/* Hover utilities for yale colors */
.hover\:bg-yale-50:hover {
    background-color: rgb(232 244 253);
}

.hover\:bg-yale-100:hover {
    background-color: rgb(208 234 251);
}

.hover\:bg-yale-200:hover {
    background-color: rgb(161 213 247);
}

.hover\:bg-yale-300:hover {
    background-color: rgb(114 191 243);
}

.hover\:bg-yale-400:hover {
    background-color: rgb(67 170 239);
}

.hover\:bg-yale-500:hover {
    background-color: rgb(20 149 235);
}

.hover\:bg-yale-600:hover {
    background-color: rgb(16 119 188);
}

.hover\:bg-yale-700:hover {
    background-color: rgb(12 89 141);
}

.hover\:bg-yale-800:hover {
    background-color: rgb(8 60 94);
}

.hover\:bg-yale-900:hover {
    background-color: rgb(4 30 47);
}

.hover\:bg-yale-950:hover {
    background-color: rgb(3 21 33);
}

/* Utility Classes */
.blur-3xl {
    filter: blur(64px);
}

.opacity-20 {
    opacity: 0.2;
}