/* roulang page: index */
@layer base {
            :root {
                --primary: #F97316;
                --primary-hover: #EA580C;
                --secondary: #0F766E;
                --text-main: #0F172A;
                --text-body: #334155;
                --text-muted: #64748B;
                --bg-light: #F8FAFC;
                --bg-dark: #0B132B;
            }
            body {
                @apply bg-slate-50 text-slate-800 font-sans antialiased leading-relaxed;
            }
            h1, h2, h3, h4, h5, h6 {
                @apply tracking-tight font-bold text-slate-900;
            }
        }
        .text-shadow-sm {
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
        }
        .tab-btn.active {
            @apply bg-volley-orange text-white border-volley-orange shadow-md;
        }