@charset "UTF-8";

:root {
    --color-bg: #242424;
    --color-text-default: #e2e2e2;
    --color-rfp-accent: #5f64d5;
    
    --gap-page-header: 1px;
    
    --height-page-header: 1.75rem;
    --padding-header-sides: 1rem;
    
    --font-default: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-mono: "Lilex", "Commit", "Jet Brains", monospace;
    --font-sans: "Inter", "Be Vietnam Pro", sans-serif;
    --font-serif: "Source Serif", serif;
    --font-typewriter: "Ubuntu Mono", "Courier Prime Code", monospace;
    --font-icons: "Font Awesome";
}

html {
    width: 100%;
    font-size: 100%;
}

body {
    font-family: var(--font-default);
    height: 100%;

    background-color: var(--color-bg);
    color: var(--color-text-default);
    line-height: 1.4;
    
    /* For Inter */
    font-feature-settings: "cv11", "ss03";
}

/*********************************************/
/* PAGE HEADER */
.page-header {
    height: var(--height-page-header);
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    background-color: var(--color-rfp-accent);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    line-height: 1;
}

.page-header .tab {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 var(--padding-header-sides);
    color: hsl(from var(--color-text-default) h s l / 0.5);
    cursor: pointer;
    border-left: var(--gap-page-header) solid var(--color-bg);
}
.page-header .tab:last-of-type {
    border-right: var(--gap-page-header) solid var(--color-bg);
}

.page-header .tab:not(.current):hover {
    text-decoration: underline;
    color: var(--color-text-default);
}

.page-header .tab.current {
    background-color: var(--color-bg);
    color: var(--color-rfp-accent);
    cursor: auto;
}