:root {
    /* Colors */
    --background-color: #fff;
    --primary-color: #3498db;
    --primary-color-lighter: #4aa3df;
    --primary-color-darker: #124364;


    --success-color: #2ecc71;
    --success-color-darker: #176437;

    --warning-color: #e67e22;
    --warning-color-darker: #a85913;

    --danger-color: #e74c3c;
    --danger-color-darker: #921e12;

    --primary-rgb: 52, 152, 219;
    --success-rgb: 46, 204, 113;
    --warning-rgb: 230, 126, 34;
    --danger-rgb: 231, 76, 60;
    --success-dark-rgb: 32, 143, 79;
    --warning-dark-rgb: 161, 88, 24;
    --danger-dark-rgb: 162, 53, 42;

    --body-background: #F2F2F2;

    /* Typography */
    --font-family-sans: "Geist", sans-serif;
    --font-size-base: 14px;
    --font-size-large: 1.25rem;
    --font-size-small: 0.875rem;
    --font-color-rgb: 0, 0, 0;
    --font-color: rgb(var(--font-color-rgb));
    --font-color-light: rgba(var(--font-color-rgb),0.7);
    --font-btn-primary: rgb(245,245,245);
    --font-line-height: 1.4;

    /* Spacing */
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 24px;

    /* Border */
    --global-radius: 5px;
    --border-color: rgba(0,0,0,0.15);
    --global-border: 1px solid var(--border-color);
    --table-cell-border: 1px solid rgba(0,0,0,0.05);
    --primary-border: 1px solid rgba(var(--primary-rgb), 0.3);

    /* Shadows */
    --box-shadow: 0 0 5px rgba(0,0,0,0.1);
    --input-shadow: 0 1px 3px 0 rgba(0,0,0,0.05),0 1px 2px -1px rgba(0,0,0,0.05);
    --container-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(17, 24, 39, 0.05);
    --gradient-radial-background: linear-gradient(90deg,rgb(0, 0, 0, 0.4) 0%, rgb(0, 0, 0, 0.5) 10%, rgb(0, 0, 0, 0.5) 90%, rgb(0, 0, 0, 0.4) 100%);

    /* Transitions */
    --global-transition: all 0.3s ease-in-out;

    /* Headbar and navbar */
    --headbar-height: 50px;
    --navbar-width: 240px;
    --headbar-background: var(--background-color);
    --headbar-font-color: var(--font-color);
    --logo-background: var(--background-color);
    --logo-border: var(--global-border);
    --navbar-background: var(--background-color);
    --navbar-font-color: var(--font-color);
    --navbar-border: var(--table-cell-border);

    /* Forms */
    --input-height: 36px;
    --button-height: 35px;
}

html.dark {
    /* Colors */
    --background-color: #2B2D30;
    --body-background: #252526;

    /* Typography */
    --font-color-rgb: 255,255,255;

    /* Border */
    --border-color: rgba(255,255,255,0.08);
    --table-cell-border: 1px solid rgba(255,255,255,0.05);

    /* Shadows */
    --box-shadow: 0 0 5px rgba(0,0,0,0.35);
    --container-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(17, 24, 39, 0.15);
}