:root {

    --hue:          125;
    --sat:          60%;


    /* Colors */

    --accent-100: hsl(var(--hue), var(--sat), 10%);
    --accent-150: hsl(var(--hue), var(--sat), 15%);
    --accent-200: hsl(var(--hue), var(--sat), 20%);
    --accent-250: hsl(var(--hue), var(--sat), 25%);
    --accent-300: hsl(var(--hue), var(--sat), 30%);
    --accent-350: hsl(var(--hue), var(--sat), 35%);
    --accent-400: hsl(var(--hue), var(--sat), 40%);
    --accent-450: hsl(var(--hue), var(--sat), 45%);
    --accent-500: hsl(var(--hue), var(--sat), 50%);
    --accent-550: hsl(var(--hue), var(--sat), 55%);
    --accent-600: hsl(var(--hue), var(--sat), 60%);
    --accent-650: hsl(var(--hue), var(--sat), 65%);
    --accent-700: hsl(var(--hue), var(--sat), 70%);
    --accent-750: hsl(var(--hue), var(--sat), 75%);
    --accent-800: hsl(var(--hue), var(--sat), 80%);
    --accent-850: hsl(var(--hue), var(--sat), 85%);
    --accent-900: hsl(var(--hue), var(--sat), 90%);

    --accent:       var(--accent-300);
    --accent-light: var(--accent-700);
    --accent-dark:  var(--accent-100);

    /*
    ** Complementary Color
    */

    --hue-val: calc(var(--hue) - 180);
    --hue-comp: mod(var(--hue-val), 360);

    --comp-300: hsl(var(--hue-comp), var(--sat), 30%);
    --comp-500: hsl(var(--hue-comp), var(--sat), 50%);
    --comp-700: hsl(var(--hue-comp), var(--sat), 70%);



    /* Backgrounds */

    --light-bg: #F6F6F6;
    --light-bg-darken-1: #E9E9E9;
    --light-bg-darken-2: #DCDCDC;
    --light-bg-darken-3: #B1B1B1;
    --light-bg-darken-4: #909090;
    --dark-bg:  #323232;


    /* Text */

    --dark-text:  #212121;
    --dark-text-l: #434343;
    --light-text: #A9A9A9;
    --lighter-text: #E1E1E1;
    --lightest-text: #F3F3F3;

    /* Gradients */

    --grad-color-from:  var(--accent);
    --grad-color-to:    var(--accent-700);

    --light-bg-grad-down:   linear-gradient(to bottom, #FFFFFF, #E1E1E1);
    --light-bg-grad-up:     linear-gradient(to top, #FFFFFF, #E1E1E1);
    --light-bg-grad-left:   linear-gradient(to left, #FFFFFF, #E1E1E1);
    --light-bg-grad-right:  linear-gradient(to right, #FFFFFF, #E1E1E1);

    --grad-down:    linear-gradient(to bottom, var(--grad-color-from), var(--grad-color-to));
    --grad-up:      linear-gradient(to top, var(--grad-color-from), var(--grad-color-to));
    --grad-left:    linear-gradient(to left, var(--grad-color-from), var(--grad-color-to));
    --grad-right:   linear-gradient(to right, var(--grad-color-from), var(--grad-color-to));

    /* Border */

    --border-color: #DDDDDD;
    --border-color-darken-1: #CCCCCC;
    --border-color-darken-2: #BBBBBB;
    --border-color-darken-3: #AAAAAA;
    --light-border: 1px solid var(--border-color);
    --accent-border: 1px solid var(--accent);

    --b-r-3: 3px;
    --b-r-6: 6px;

    /* Margins & Paddings */

    --p1: .6rem;
    --p4: 2.1rem;
    --p2: 1rem;
    --p3: 1.5rem;

    --m1: var(--padding-1);
    --m2: var(--padding-2);
    --m3: var(--padding-3);
    --m4: var(--padding-4);


    /* Fonts */
    --root-font: 'Lato', sans-serif;
    --root-font-size: 14px;

    --monospace-font: 'Source Code Pro';
    --heading-font: 'Anton';
    --text-font: 'Open Sans';

    /* See the scaling at the end of the file */

    --font-size-1: 1rem;
    --font-size-2: 1.2rem;
    --font-size-3: 1.44rem;
    --font-size-4: 1.728rem;
    --font-size-5: 2.074rem;
    --font-size-6: 2.488rem;



    /* Theme initialization */

    --default-bg: var(--light-bg);
    --default-text: var(--dark-text);
    --default-link-color: var(--accent-dark);
    --default-hover-color: var(--lightest-text);


    /* Specific Elements */


}

.light-mode {

    --bg-row: var(--light-bg-darken-1);
    --bg-row-highlight: var(--light-bg-darken-2);
}

.dark-mode {
    --bg-row: var(--light-bg-darken-4);
    --bg-row-highlight: var(--light-bg-darken-3);
}


@media screen and (max-width: 800px) {
    :root {

        /* Font scaling

        --font-size-1: 1rem;
        --font-size-2: 1.333rem;
        --font-size-3: 1.777rem;
        --font-size-4: 2.369rem;
        --font-size-5: 3.157rem;
        --font-size-6: 4.209rem;

        */
    }
}