:root {
    /* Colors */
    --blue: #0F387C;
    --dark-blue: #0F172A;
    --red: #C51718;
    --white: #FFFFFF;
    --light-blue: #ADD8E6;
    --dark-blue: #00008B;
    --light-gray: #E6E6E6;
    --medium-gray: #94A3B8;
    --dark-gray: #4A4A4A;
    --light-green: #90EE90;
    --dark-green: #006400;
    --light-red: #FF9999;
    --dark-red: #8B0000;
    --light-yellow: #FFF599;

    --element-background: #F8FAFC;
    --element-background-lightblue: #EFF6FF;
    --page-background: #FFFFFF;
    --text-color: #2A3B58;
    --secondary-text-color: #647085;

    /* Border */
    --border-color: #CCD8EB;
    --border: 1px solid var(--border-color);
    
    /* Typography */
    --font-size: 18px;
    --line-height: 21px;
    --secondary-font-size: 14px;
    --secondary-line-height: 17px;
    --label-font-size: 20px;
    --label-line-height: 28px;
    --title-font-size: 32px;
    --title-line-height: 42px;
    
    /* Dimensions */
    --radius: 8px;
    --section-gap: 48px;
    --page-padding: 48px;

    /* Animations */
    --transition: all .1s ease-in-out;
}