:root {
    /* Brand Colors */
    --primary-color: #3d2d6d;        /* Deep purple - FES brand */
    --accent-color: #f7822b;         /* Vibrant orange - FES accent */
    --accent-hover: #e66f1a;
    --delete-red: #dc3545;
    --delete-red-hover: #cd2434;

    /* Login-specific CSS Variables */
    --login-error-color: #dc3545;
    --login-error-bg: #f8d7da;
    --login-error-border: #f5c6cb;
    
    /* Surface Colors */
    --bg-color: #f4f4f4;
    --surface-color: #ffffff;
    --border-color: #d6d6d6;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #999999;
    
    /* Header */
    --header-bg: #3d2d6d;            /* Deep purple header */
    
    /* Borders & Radius */
    --border-radius: 4px;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-dropdown: 0 4px 16px rgba(0,0,0,0.12);
}

:root {
    --kendo-color-border: rgb(214, 214, 214);
    --kendo-color-primary: #f7822b;
    --kendo-color-primary-hover: #f7822b;
    --kendo-color-primary-active: #f7822b;
    --kendo-color-primary-on-surface: #f7822b;
}