/* Tailwind CSS utilities - custom build for SONG YULIN website */
/* Generated for China accessibility - includes all used arbitrary value classes */

/* Language dropdown styling */
#lang-dropdown-desktop {
    background-color: rgba(36, 34, 31, 0.98) !important;
    border-color: rgba(90, 86, 80, 0.25) !important;
}
#lang-dropdown-desktop button {
    color: rgba(200, 196, 190, 0.6) !important;
    text-decoration: none !important;
}
#lang-dropdown-desktop button:hover {
    color: rgba(232, 228, 222, 1) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(196, 181, 154, 0.8) !important;
    text-underline-offset: 3px !important;
}
#lang-dropdown-desktop button.font-medium {
    color: rgba(232, 228, 222, 1) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(196, 181, 154, 0.8) !important;
    text-underline-offset: 3px !important;
}

/* lg breakpoint (1024px) responsive utilities */
@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Background colors */
.bg-green-50 { background-color: #f0fdf4; }
.bg-red-50 { background-color: #fef2f2; }

/* Text colors */
.text-green-800 { color: #166534; }
.text-red-800 { color: #991b1b; }

/* Width utilities */
.w-\[100vw\] { width: 100vw; }
.w-\[50\%\] { width: 50%; }
.w-\[1px\] { width: 1px; }
.w-\[200px\] { width: 200px; }
.w-\[24px\] { width: 24px; }
.w-\[32px\] { width: 32px; }
.w-\[10px\] { width: 10px; }
.w-\[8px\] { width: 8px; }
.w-\[12px\] { width: 12px; }
.w-\[3px\] { width: 3px; }

/* Max-width utilities */
.max-w-\[90vw\] { max-width: 90vw; }
.max-w-\[1920px\] { max-width: 1920px; }
.max-w-\[82vw\] { max-width: 82vw; }
.max-w-5xl { max-width: 64rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-lg { max-width: 32rem; }

/* Text size utilities */
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[9px\] { font-size: 9px; }

/* Border color utilities */
.border-\[#111111\] { border-color: #111111; }
.border-\[#111111\]\/10 { border-color: rgba(17, 17, 17, 0.1); }
.border-\[#111111\]\/20 { border-color: rgba(17, 17, 17, 0.2); }
.border-\[#111111\]\/30 { border-color: rgba(17, 17, 17, 0.3); }
.border-\[#111111\]\/40 { border-color: rgba(17, 17, 17, 0.4); }
.border-\[#111111\]\/50 { border-color: rgba(17, 17, 17, 0.5); }
.border-\[#111111\]\/60 { border-color: rgba(17, 17, 17, 0.6); }

/* Background utilities */
.bg-\[#111111\] { background-color: #111111; }
.bg-\[#111111\]\/10 { background-color: rgba(17, 17, 17, 0.1); }
.bg-\[#111111\]\/30 { background-color: rgba(17, 17, 17, 0.3); }
.bg-\[#111111\]\/40 { background-color: rgba(17, 17, 17, 0.4); }
.bg-\[#111111\]\/50 { background-color: rgba(17, 17, 17, 0.5); }
.bg-\[#111111\]\/60 { background-color: rgba(17, 17, 17, 0.6); }
.bg-\[#111111\]\/70 { background-color: rgba(17, 17, 17, 0.7); }
.bg-\[#111111\]\/80 { background-color: rgba(17, 17, 17, 0.8); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
.bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }

/* Text color utilities */
.text-\[#111111\] { color: #111111; }
.text-\[#111111\]\/40 { color: rgba(17, 17, 17, 0.4); }
.text-\[#111111\]\/50 { color: rgba(17, 17, 17, 0.5); }
.text-\[#111111\]\/60 { color: rgba(17, 17, 17, 0.6); }
.text-\[#111111\]\/70 { color: rgba(17, 17, 17, 0.7); }
.text-\[#111111\]\/80 { color: rgba(17, 17, 17, 0.8); }
.text-\[#111111\]\/85 { color: rgba(17, 17, 17, 0.85); }
.text-\[#111111\]\/90 { color: rgba(17, 17, 17, 0.9); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }

/* Scroll margin utilities */
.scroll-mt-20 { scroll-margin-top: 5rem; }
.scroll-mt-8 { scroll-margin-top: 2rem; }
.scroll-mt-16 { scroll-margin-top: 4rem; }
.scroll-mt-10 { scroll-margin-top: 2.5rem; }

/* Spacing utilities */
.h-\[85vh\] { height: 85vh; }
.h-\[60vh\] { height: 60vh; }
.h-\[50vh\] { height: 50vh; }
.h-\[64px\] { height: 64px; }
.h-\[100px\] { height: 100px; }
.h-\[1px\] { height: 1px; }
.h-\[200px\] { height: 200px; }
.h-\[30vh\] { height: 30vh; }
.h-\[32px\] { height: 32px; }
.h-\[24px\] { height: 24px; }
.h-\[10px\] { height: 10px; }
.h-\[8px\] { height: 8px; }
.h-\[12px\] { height: 12px; }
.min-h-\[200px\] { min-height: 200px; }
.min-h-\[30vh\] { min-height: 30vh; }

/* Aspect ratio */
.aspect-\[3\/4\] { aspect-ratio: 3/4; }

/* Tracking (letter-spacing) */
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }

/* Box shadow */
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.\[box-shadow\:0_0_20px_rgba\(0\,0\,0\,0\.5\)\] { box-shadow: 0 0 20px rgba(0,0,0,0.5); }

/* Custom properties */
.\[--duration\:1000ms\] { --duration: 1000ms; }