/*
 * Kassoe Housing — designtokens.
 *
 * Alle værdier er hentet direkte fra salgspræsentationen (sales deck):
 * petrolfarven #00728F går igen på hver eneste slide, cyan #43D7FD er
 * eksportmarkederne på Europakortet, og skrifttypen er Red Hat Display.
 *
 * Deles af site.css (offentlig hjemmeside) og admin.css (system + portal),
 * så de to flader ikke kan skride fra hinanden.
 */

/*
 * Red Hat Display — selvhostet, ingen eksterne kald.
 *
 * Variable fonte (vægt 400-900 i én fil), så hele skalaen 400/500/700/800/900
 * koster 30 KB latin + 14 KB latin-ext. latin-ext er nødvendig for pl og ro
 * (ł ń ś ż ș ț ă) og hentes kun af browsere, der møder de tegn.
 *
 * SIL Open Font License 1.1 — se fonts/red-hat-display/LICENSE.txt.
 */
@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/red-hat-display/red-hat-display-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/red-hat-display/red-hat-display-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Red Hat Display';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/red-hat-display/red-hat-display-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Red Hat Display';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/red-hat-display/red-hat-display-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---------- Brandfarver ---------- */
    --kh-petrol: #00728f;        /* primær — logo, knapper, links */
    --kh-petrol-mid: #157390;    /* mellemtone fra deckets sekundære flader */
    --kh-petrol-deep: #005570;   /* hover og dybde i gradienter */
    --kh-ink: #00394a;           /* mørkeste flade — header, footer, hero */
    --kh-cyan: #43d7fd;          /* accent — CTA, tal, fremhævninger */
    --kh-cyan-soft: #99c6d1;
    --kh-slate: #7b99bb;
    --kh-mist: #e5f0f3;          /* lys sektionsbaggrund */

    /* ---------- Tekst og flader ---------- */
    --kh-text: #16303a;
    --kh-muted: #526a75;         /* mørk nok til AA også på --kh-mist (4,9:1) */
    --kh-surface: #ffffff;
    --kh-surface-soft: #f4f9fb;
    --kh-line: #d9e6ea;
    --kh-line-strong: #b9d0d8;

    /* ---------- Statusfarver (admin/portal) ---------- */
    --kh-ok: #1c6b2d;
    --kh-ok-bg: #dcf1e0;
    --kh-warn: #8a6403;
    --kh-warn-bg: #fdf0d3;
    --kh-danger: #a02622;
    --kh-danger-bg: #f7dedc;
    --kh-info: #0d5f78;
    --kh-info-bg: #dceef3;

    /* ---------- Form ---------- */
    --kh-radius: 16px;
    --kh-radius-sm: 10px;
    --kh-radius-xs: 6px;
    --kh-shadow: 0 6px 22px rgb(0 57 74 / 8%);
    --kh-shadow-hover: 0 14px 34px rgb(0 57 74 / 16%);
    --kh-ring: 0 0 0 3px rgb(0 114 143 / 22%);

    /* ---------- Typografi ---------- */
    --kh-font: 'Red Hat Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    /* Baggrundsbilleder fra præsentationen */
    --kh-img-globe: url('/images/brand/hero-globe.jpg');
    --kh-img-blueprint: url('/images/brand/blueprint.jpg');
    --kh-img-skyline: url('/images/brand/skyline.jpg');
    --kh-img-apartments: url('/images/brand/apartments.jpg');
}

/* ---------- Logo ---------- */
/* Logoet ligger i to varianter: petrol på lys bund, hvid på mørk bund. */
.kh-logo {
    display: block;
    width: auto;
    height: 34px;
    flex: none;
}

.kh-logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
}