/*
    This file should contain ONLY coloring and theming rules.
    Positioning and layout rules should go in skeleton.css!
*/

:root {
    /*
    CSS variables go here!
    https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
    */

    /* The main colors of the stylesheet */
    --background: #0d193b;
    --foreground: #a0ccff;
    --accent: #ffffff;

    /* Panel background */
    --panel: rgba(160, 204, 255, 0.02);  /* It's --foreground, but with 2% alpha */
    --border: rgba(160, 204, 255, 0.10);  /* It's --foreground, but with 10% alpha */

    /* Pastel colors */
    --red: #ff7d7d;
    --orange: #ffbb7d;
    --yellow: #ffff7d;
    --lime: #7dff7d;
    --cyan: #7dffff;
    --blue: #7d7dff;
    --magenta: #ff7dff;

    /* Link colors */
    --link: #00caca;
    --link-hover: #00ffff;
    --link-active: #a0ffff;

    /* Fonts */
    --font-text: sans-serif;
    --font-title: sans-serif;
    --font-code: monospace;
}

/*
    From here on, rules will be defined as

    inherits1, inherits2, inherits3, ...,
    .rule-name {
        ...
    }
*/

/* --- Main colors and font --- */

* {
    border-color: var(--border);
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-text);
}

/* --- Text colors --- */

.color-red {
    color: var(--red);
}

.color-orange {
    color: var(--orange);
}

.color-yellow {
    color: var(--yellow);
}

.color-lime {
    color: var(--lime);
}

.color-cyan {
    color: var(--cyan);
}

.color-blue {
    color: var(--blue);
}

.color-magenta {
    color: var(--magenta);
}


/* --- Titles --- */

h1, h2, h3, h4, h5, h6, th,
.title {
    color: var(--accent);
    font-family: var(--font-title);
}

/* --- Links --- */

a,
.link {
    color: var(--link);
    text-decoration: none;
}

a:hover,
.link:hover {
    color: var(--link-hover);
}

a:active,
.link:active {
    color: var(--link-active);
}

/* --- Code blocks --- */

pre, code, samp,
.monospace {
    font-family: var(--font-code);
}

/* --- Panels --- */

.panel {
    background-color: var(--panel);
}