:root {

    /* Typography */
    --font: 'Open Sans';
    --font-app: 'Roboto';

    /* Colors */
    --primary: #1C7A7C;
    --primary-s1: #B6DDDE;
    --link: #0376BD;

    --white: #fff;
    --black: #000;

    --light: #FAFAFA;

    --dark: #2C2C2C;
    --dark-2: #444343;

    --gray-1: #DFE5E5;
    --gray-2: #666;
    --gray-3: #E4E6E9;
    --gray-4: #F2F2F2;
    --gray-5: #DADADA;
    --gray-6: #707070;
    --gray-7: #7A7A7A;
    --gray-8: #AFADAD;
    --gray-9: #FCFCFD;
    --gray-10: #667085;
    --gray-11: #EAECF0;
    --gray-12: #ECF0F5;
    --gray-13: #EAEAEA;
    --gray-14: #D0D5DD;

    --purple-1: #EDF0F7;

    --red-1: #D52814;
    --red-2: #FAE6E6;
    --red-3: #DF5848;

    --orange-1: #F5550E;
    --orange-2: #FFEBE0;
    --orange-3: #FF7F47;

    --green-1: #12AA12;
    --green-2: #DDEBEC;
    --green-3: #E8FFF1;
    --green-4: #037847;
    --green-5: #14BA6D;

    --light-blue-1: #E5F5FF;
    --light-blue-2: #0376BD;
    --light-blue-3: #5EBBF4;

    --brand-google: #F14C36;

    --backdrop-bg: rgba(18, 18, 18, 0.6);
    --context-overlay-bg: rgba(44, 44, 44, 0.8);

    /* Shadows */
    --shadow-soft: 0px 2px 4px 0px #00000040;
    --shadow-medium: 0px 4px 4px 0px #00000040;
    --shadow-hard: 0px 4px 8px 0px #00000026;
    --shadow-tip: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004D;
    --shadow-context-menu: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004D;

    /* Gradients */
    --half-and-half: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 64.41%);
}