/* =========================
   CSS VARIABLES
========================= */
:root {
    --first:        #354872;
    --second:       #4A6090;
    --third:        #D5CCCA;
    --fourth:       #E4DDD8;
    --white:        #FFFFFF;
    --dark-gray:    #1E2D4A;
    --medium-gray:  #556080;
    --light-gray:   #B0BACE;
    --success:      #7AAD64;
    --error:        #AD647F;
    --warning:      #FFA726;
    --shadow-light:  rgba(53, 72, 114, 0.15);
    --shadow-medium: rgba(30, 45, 74, 0.28);
    --shadow-soft:   rgba(53, 72, 114, 0.12);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =========================
   STAFF IT — VARIABLE OVERRIDES
   Versi A: Cyan #0891B2 (Cyan-600)
   Teks putih AMAN — kontras ratio ~4.6:1
========================= */
body.is-staff {
    --first:        #0891B2;
    --second:       #22B8D1;
    --third:        #CCEEF5;
    --fourth:       #E0F7FB;

    --white:        #FFFFFF;
    --dark-gray:    #0C4A58;
    --medium-gray:  #3D7A8A;
    --light-gray:   #A8DAE6;

    --success:      #7AAD64;
    --error:        #AD647F;
    --warning:      #FFA726;

    --shadow-light:  rgba(8, 145, 178, 0.15);
    --shadow-medium: rgba(12, 74, 88, 0.28);
    --shadow-soft:   rgba(8, 145, 178, 0.12);
}

/* Scrollbar — cyan version */
body.is-staff ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0891B2, #22B8D1);
}

body.is-staff ::-webkit-scrollbar-track {
    background: var(--third);
}

/* =========================
   FONT
========================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================
   RESET
========================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    color: var(--dark-gray);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =========================
   MAIN LAYOUT
========================= */
.content {
    color: var(--dark-gray);
    flex: 1;
    padding: 0px 0;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* =========================
   GLOBAL ANIMATIONS
========================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes wave {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

@keyframes float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* =========================
   SCROLLBAR
========================= */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--third);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--first), var(--second));
}