:root {
    /* ==========================================================================
       Colors
       ========================================================================== */

    --ucr-light-blue: #00c0f3;
    --ucr-blue: #005da4;
    --ucr-white: #ffffff;
    --ucr-black: #000000;
    --ucr-yellow: #ffe06a;
    --ucr-green: #6dc067;
    --ucr-background: #e6e6e6;
    --ucr-sidebar: #ffffff;
    --ucr-footer: #666666;
    --ucr-divider: #bdbdbd;
    --ucr-text-secondary: #666666;
    --ucr-destructive: #c0392b;
    /* ==========================================================================
       Typography
       ========================================================================== */

    --font-family-base: Arial, sans-serif;
    --font-size-min: 12px;
    --font-size-body: 14px;
    /* ==========================================================================
       Spacing
       ========================================================================== */

    --spacing-1: 8px;
    --spacing-2: 16px;
    --spacing-3: 24px;
    --spacing-4: 32px;
    --spacing-5: 40px;
    --spacing-6: 48px;
    /* ==========================================================================
       Layout
       ========================================================================== */

    --content-padding-h: var(--spacing-4);
    --content-padding-v: var(--spacing-3);
    --content-gap-breadcrumb-title: var(--spacing-1);
    --content-gap-title-body: var(--spacing-3);
    /* ==========================================================================
       Header
       ========================================================================== */

    --header-min-height: 56px;
    --header-separator-height: 4px;
    --header-separator-color: var(--ucr-divider);
    --header-logo-height: 50px;
    --header-logo-margin-v: 3px;
    --header-bg: var(--ucr-blue);
    /* ==========================================================================
       Footer
       ========================================================================== */

    --footer-min-height: 60px;
    --footer-bg: var(--ucr-footer);
    --footer-link-color: var(--ucr-white);
    /* ==========================================================================
       Navigation Bar
       ========================================================================== */
    /*Navigation Bar style configuration*/
    --navbar-bg: var(--ucr-white);
    --navbar-min-height: 48px;
    --navbar-text-color: var(--ucr-blue);
    --navbar-font-size: var(--font-size-body);
    --navbar-font-weight: 400;
    --navbar-z-index: 100;
    /* Navigation bar clickable sections configuration */
    --navbar-tab-padding-h: var(--spacing-4);
    --navbar-tab-padding-v: var(--spacing-1);
    --navbar-tab-university-width: var(--sidebar-width);
    --navbar-tab-home-width: 20%;
    --navbar-tab-hover-bg: rgba(0, 93, 164, 0.08);
    --navbar-tab-active-bg: rgba(0, 0, 0, 0.12);
    --navbar-tab-active-weight: 700;
    --navbar-divider-color: var(--ucr-divider);
    --navbar-divider-width: 1px;
    /*Style for Universirty Dropdown in navigation bar*/
    --navbar-dropdown-bg: var(--ucr-white);
    --navbar-dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    --navbar-dropdown-item-height: 48px;
    --navbar-dropdown-border: var(--ucr-divider);
    --navbar-dropdown-text: #1a1a2e;
    --navbar-dropdown-label-size: var(--font-size-min);
    --navbar-dropdown-label-weight: 700;
    /* ==========================================================================
       Sidebar
       ========================================================================== */
    --sidebar-width: 280px;
    /* ==========================================================================
   Form Variables (Create/Edit Forms)
   ========================================================================== */
    /* Blue Variants */
    --ucr-blue-dark: #004a83;
    --ucr-blue-tint: #e6f0f9;
    --ucr-light-blue-dim: rgba(0, 192, 243, 0.12);
    /* Yellow and Green Tints */
    --ucr-yellow-tint: #fffbeb;
    /* Aliases */
    --error-color: var(--ucr-destructive);
    --font-base: var(--font-family-base);
    /* Surfaces and Panels */
    --panel-border: #dfe6ee;

    --toggle-card-bg: #f7f9fc;
    --toggle-card-border: #dbe3ee;
    /* Semantic Text */
    --form-text-primary: #1a2233;
    --form-text-secondary: #3d4f6a;
    --form-text-muted: #7a8aaa;
    --form-text-label: #2c3e5a;
    /* Spacing */
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    /* Radius */
    --radius-panel: 5px;
    --radius-field: 10x;
    --radius-badge: 4px;
    /* ==========================================================================
       Accessibility
       ========================================================================== */

    --focus-outline-width: 2px;
    --focus-outline-color: #000000;
    --focus-outline-offset: 3px;
    --focus-border-radius: 2px;
}