/* Frei brand, applied lightly.
 *
 * The skill says "skal brukes minimalt", and this is a dense data tool rather
 * than a document, so what is taken here is the palette, the two typefaces and
 * the mark — not the document grid, which has no counterpart in a table view.
 *
 * One deliberate exception runs through the whole file: the colours that carry
 * MEANING in the results are left alone. Orange on a stale revenue year, amber
 * on "ukjent", the coverage bars going warm below 25% — those are signals a
 * salesperson reads, and repainting them in brand colours would cost
 * information to gain consistency. Brand owns the chrome; data owns its own
 * palette.
 *
 * Loaded after each page's inline <style>, so it overrides without any page
 * needing to be rewritten.
 */

@font-face {
    font-family: 'Josefin Sans';
    src: url('/static/assets/fonts/JosefinSans.ttf') format('truetype');
    font-weight: 100 700;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('/static/assets/fonts/OpenSans.ttf') format('truetype');
    font-weight: 300 800;
    font-display: swap;
}

:root {
    --marian:   #424874;   /* headings, dark surfaces, body text */
    --peri:     #DCD6F7;   /* light background, emphasis */
    --sage:     #355C5C;   /* main accent, eyebrow, kicker */
    --palesage: #D6E5E3;   /* light content background */
    --gold:     #DABB77;   /* sparingly — fills and large numerals only */
    --cream:    #F4EDDD;   /* warm neutral surface */

    --body-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --display-font: 'Josefin Sans', 'Open Sans', -apple-system, sans-serif;
}

body {
    font-family: var(--body-font);
    color: var(--marian);
}

/* Display type. Josefin Sans is light-waisted, so headings get a little
   letter-spacing rather than more weight. */
h1, h2, h3 {
    font-family: var(--display-font);
    color: var(--marian);
    letter-spacing: .01em;
}

h1 {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The asterisk mark. Blue on light surfaces — the rule is fixed, and every
   surface in this app is light, so the peri variant is not shipped. */
h1::before {
    content: '';
    width: .82em;
    height: .82em;
    flex: 0 0 auto;
    background: url('/static/assets/img/frei-mark-blue.svg') center / contain no-repeat;
}

.subtitle { color: var(--sage); }
.subtitle a, a { color: var(--sage); }
a:hover { color: var(--marian); }

/* Eyebrows and section kickers — the sage role in the brand. */
.cov-title,
.cohort-card h4,
.dl-group h4 {
    color: var(--sage);
}

/* Primary actions carry the brand; secondary stays quiet. */
.btn-primary,
button.btn-primary {
    background: var(--marian);
    border-color: var(--marian);
}
.btn-primary:hover,
button.btn-primary:hover { background: #363c63; border-color: #363c63; }

.btn-secondary {
    background: var(--palesage);
    border-color: #c3d6d3;
    color: var(--sage);
}
.btn-secondary:hover { background: #c7dcd9; }

/* Panel headers sit on the warm neutral rather than a grey. */
.cohort-head, .dl-head { background: var(--cream); border-bottom-color: #e6dcc4; }
.coverage { background: var(--cream); border-color: #e6dcc4; }
.coverage .cov { border-right-color: #e6dcc4; }

/* Table headers pick up the display face; rows stay as they are so the
   data signals keep their contrast. */
thead th { font-family: var(--display-font); color: var(--sage); letter-spacing: .02em; }

.user-bar { color: var(--sage); }

/* The coverage bar's neutral fill is decoration, so it takes the brand. Its
   warm "below 25%" state is NOT — that one is the signal, and it keeps its
   own orange so the contrast against the neutral fill still reads. */
.coverage .cov-bar span { background: var(--sage); }
.coverage .cov-bar { background: #cfd8d6; }

/* The result count is emphasis, not a data signal. */
.result-count strong, #total-count { color: var(--marian); }

/* Org numbers and other identifiers stay monospace — they are read digit by
   digit and a proportional face makes that harder, brand or not. */
.col-orgnr, .mono { font-family: 'SF Mono', Monaco, Consolas, monospace; }