﻿:root {
    --standard-font: "Roboto Condensed";
    /* ============================= */
    /* BRAND (Deep Prasora Blue)     */
    /* ============================= */

    --brand-color-h: 208;
    --brand-color-s: 62%;
    --brand-color-l: 28%;
    --brand-color-hsl: var(--brand-color-h), var(--brand-color-s), var(--brand-color-l);
    --brand-color: hsl(var(--brand-color-hsl));
    --brand-color-10: hsl(var(--brand-color-h), var(--brand-color-s), 10%);
    --brand-color-20: hsl(var(--brand-color-h), var(--brand-color-s), 20%);
    --brand-color-30: hsl(var(--brand-color-h), var(--brand-color-s), 30%);
    --brand-color-40: hsl(var(--brand-color-h), var(--brand-color-s), 40%);
    --brand-color-50: hsl(var(--brand-color-h), var(--brand-color-s), 50%);
    --brand-color-60: hsl(var(--brand-color-h), var(--brand-color-s), 60%);
    --brand-color-70: hsl(var(--brand-color-h), var(--brand-color-s), 70%);
    --brand-color-80: hsl(var(--brand-color-h), var(--brand-color-s), 80%);
    --brand-color-90: hsl(var(--brand-color-h), var(--brand-color-s), 90%);
    --brand-color-light: hsl(var(--brand-color-h), 45%, 45%);
    --brand-color-dark: hsl(var(--brand-color-h), 65%, 18%);
    --brand-color-low: hsl(var(--brand-color-h), 35%, 28%);
    --brand-color-lowest: hsl(var(--brand-color-h), 25%, 28%);
    --contrastThreshold: 58%;
    --switch: calc((var(--brand-color-l) - var(--contrastThreshold)) * -100);
    --contrast-color: hsl(0, 0%, var(--switch));
    /* ============================= */
    /* ACCENT (Refined Warm Signal)  */
    /* ============================= */

    --accent-color-h: 10;
    --accent-color-s: 70%;
    --accent-color-l: 42%;
    --accent-color-hsl: var(--accent-color-h), var(--accent-color-s), var(--accent-color-l);
    --accent-color: hsl(var(--accent-color-hsl));
    --accent-color-10: hsl(var(--accent-color-h), var(--accent-color-s), 10%);
    --accent-color-20: hsl(var(--accent-color-h), var(--accent-color-s), 20%);
    --accent-color-30: hsl(var(--accent-color-h), var(--accent-color-s), 30%);
    --accent-color-40: hsl(var(--accent-color-h), var(--accent-color-s), 40%);
    --accent-color-50: hsl(var(--accent-color-h), var(--accent-color-s), 50%);
    --accent-color-60: hsl(var(--accent-color-h), var(--accent-color-s), 60%);
    --accent-color-70: hsl(var(--accent-color-h), var(--accent-color-s), 70%);
    --accent-color-80: hsl(var(--accent-color-h), var(--accent-color-s), 80%);
    --accent-color-90: hsl(var(--accent-color-h), var(--accent-color-s), 90%);
    --accent-color-dark: hsl(var(--accent-color-h), var(--accent-color-s), 32%);
    --accent-color-light: hsl(var(--accent-color-h), 70%, 65%);
    --accentContrastThreshold: 60%;
    --accent-switch: calc((var(--accent-color-l) - var(--accentContrastThreshold)) * -100);
    --accent-contrast-color: hsl(0, 0%, var(--accent-switch));
    /* ============================= */
    /* Neutral Palette               */
    /* ============================= */

    --basic-color-light: #f3f5f7;
    --basic-color-lighter: #ffffff;
    --basic-color-gray: #98a3ad;
    --basic-color-dark: #1f2933;
    /* ============================= */
    /* Mappings                      */
    /* ============================= */

    --body-color: var(--brand-color-10);
    --menu-link-color: var(--brand-color);
    --menu-link-hover-color: var(--brand-color-70);
    --standard-link-color: var(--accent-color);
    --standard-link-bg-color: var(--accent-color);
    --standard-link-hover-color: var(--brand-color);
    --standard-button-bg-color: var(--accent-color);
    --standard-button-hover-bg-color: var(--accent-color-dark);
    --standard-button-color: var(--accent-contrast-color);
    --standard-button-hover-color: var(--accent-contrast-color);
    --tfoot-bg-color: var(--brand-color-90);
    --th-search-bg-color: var(--brand-color-80);
    --th-bg-color: var(--brand-color);
    --th-color: var(--contrast-color);
    --th-search-border-color: var(--brand-color-dark);
    --th-normal-border-color: var(--brand-color-dark);
    --th-footer-border-color: var(--brand-color-dark);
    --td-normal-border-color: var(--accent-color-80);
    --blocktitle-border-color: var(--brand-color-dark);
    --sidebar-background-color: var(--brand-color);
    --sidebar-handle-color: var(--brand-color-60);
    --home-page-marker-bg-color: var(--brand-color-20);
    --home-page-marker-bg-hover-color: var(--brand-color-40);
}
