/*
 * ═══════════════════════════════════════════════════════════════
 * DYNAMIC THEME SYSTEM — Yayasan Pendidikan Cendekia
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════
   DEFAULT: Yayasan = Sky/Blue
   ═══════════════════════════════════════════ */
:root {
    /* Brand Colors (Sky Blue) */
    --brand-50:  240 249 255;
    --brand-100: 224 242 254;
    --brand-200: 186 230 253;
    --brand-300: 125 211 252;
    --brand-400: 56 189 248;
    --brand-main: 14 165 233;
    --brand-600: 2 132 199;
    --brand-dark: 3 105 161;
    --brand-800: 7 89 133;
    --brand-900: 12 74 110;

    /* Brand Gradient */
    --brand-gradient-from: 14 165 233;
    --brand-gradient-to: 12 74 110;

    /* Typography */
    --font-heading: 'Nunito', sans-serif;
    --font-body: 'Nunito', sans-serif;

    /* Spacing & Sizing */
    --navbar-height: 4rem;
}

/* ═══════════════════════════════════════════
   SD = Orange
   ═══════════════════════════════════════════ */
[data-school="sd"] {
    --brand-50:  255 247 237;
    --brand-100: 255 237 213;
    --brand-200: 254 215 170;
    --brand-300: 253 186 116;
    --brand-400: 251 146 60;
    --brand-main: 249 115 22;
    --brand-600: 234 88 12;
    --brand-dark: 194 65 12;
    --brand-800: 154 52 18;
    --brand-900: 124 45 18;

    --brand-gradient-from: 249 115 22;
    --brand-gradient-to: 154 52 18;
}

/* ═══════════════════════════════════════════
   SMP = Biru (Tetap Sky Blue)
   ═══════════════════════════════════════════ */
[data-school="smp"] {
    --brand-50:  240 249 255;
    --brand-100: 224 242 254;
    --brand-200: 186 230 253;
    --brand-300: 125 211 252;
    --brand-400: 56 189 248;
    --brand-main: 14 165 233;
    --brand-600: 2 132 199;
    --brand-dark: 3 105 161;
    --brand-800: 7 89 133;
    --brand-900: 12 74 110;

    --brand-gradient-from: 14 165 233;
    --brand-gradient-to: 12 74 110;
}

/* ═══════════════════════════════════════════
   SMA = Abu-abu (Slate)
   ═══════════════════════════════════════════ */
[data-school="sma"] {
    --brand-50:  248 250 252;
    --brand-100: 241 245 249;
    --brand-200: 226 232 240;
    --brand-300: 203 213 225;
    --brand-400: 148 163 184;
    --brand-main: 100 116 139;
    --brand-600: 71 85 105;
    --brand-dark: 51 65 85;
    --brand-800: 30 41 59;
    --brand-900: 15 23 42;

    --brand-gradient-from: 100 116 139;
    --brand-gradient-to: 15 23 42;
}

/* ═══════════════════════════════════════════
   Base Typography Styles
   ═══════════════════════════════════════════ */
body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--font-heading);
}

/* ═══════════════════════════════════════════
   Skeleton Loading Animation
   ═══════════════════════════════════════════ */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgb(229 231 235) 25%,
        rgb(243 244 246) 37%,
        rgb(229 231 235) 63%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
}

.skeleton-text { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-title { height: 1.5rem; width: 60%; margin-bottom: 0.75rem; }
.skeleton-avatar { width: 3rem; height: 3rem; border-radius: 50%; }
.skeleton-card { height: 12rem; border-radius: 0.75rem; }

/* ═══════════════════════════════════════════
   Smooth Scroll & Selection
   ═══════════════════════════════════════════ */
html { scroll-behavior: smooth; }

::selection {
    background-color: rgb(var(--brand-main) / 0.3);
    color: rgb(var(--brand-900));
}

/* ═══════════════════════════════════════════
   Custom Scrollbar
   ═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgb(243 244 246); }
::-webkit-scrollbar-thumb { background: rgb(var(--brand-main) / 0.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--brand-main) / 0.7); }

/* ═══════════════════════════════════════════
   Glassmorphism Utility
   ═══════════════════════════════════════════ */
.glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════
   Fade-in Animation
   ═══════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }

/* ═══════════════════════════════════════════
   Hero Pattern Overlay
   ═══════════════════════════════════════════ */
.hero-pattern {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 0%, transparent 50%);
}