:root {
    /* Brand colors */
    --brand-color: #004252;
    --brand-accent: #00CC71;
    --brand-bg: #FFFFFF;
    --brand-text: #32373c;

    /* Typography */
    
    --brand-font: Poppins, sans-serif;
    --font-family: Poppins, sans-serif;
    

    /* Radius */
    --button-radius: 4px;
    --card-radius: 8px;
    /* Legacy aliases */
    --border-radius: var(--card-radius, 8px);
    --border-radius-sm: var(--button-radius, 4px);
    --border-radius-btn: var(--button-radius, 4px);

    /* Shadows */
    --shadow-light: 0 6px 12px rgba(0, 0, 0, 0.08);
    --shadow-deep: 0 12px 50px rgba(0, 0, 0, 0.12);

    /* Header/Footer */
    --header-bg: #FFFFFF;
    --footer-bg: #004252;

    /* Derived variables */
    --sidebar-background-color: var(--brand-color, #004252);
    --header-text-color: var(--brand-color, #004252);
    --primary-color: var(--brand-accent, #00CC71);
    --primary-hover: var(--brand-accent, #00CC71);
    --background-color: var(--brand-bg, #FFFFFF);
    --text-color: var(--brand-text, #32373c);
    --app-font-family: var(--brand-font, var(--font-family, 'Poppins', sans-serif));
    --header-height: 84px;

    /* Animation tokens */
    
    --animation-fade-in: fadeIn 0.3s ease-out;
    --animation-scale-in: scaleIn 0.25s ease-out;
    
}

body {
    font-family: var(--app-font-family, var(--font-family, 'Poppins', sans-serif));
    background-color: var(--background-color, #FFFFFF);
    color: var(--text-color, #32373c);
}

.user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Animation utilities */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.hover-scale {
    transition: transform 0.15s ease;
}
.hover-scale:hover {
    transform: scale(1.02);
}