/*
 * Klopt's brand, shared by every page Klopt renders: its fonts, the design
 * tokens of the brand handoff (merkblad v1, .scratch/klopt-brand/tokens.css), the
 * word mark and the pill button. Pages link it before their own stylesheet.
 *
 * The fonts are self-hosted from fonts/, under the SIL Open Font License
 * (fonts/OFL-*.txt). Klopt's Content Security Policy allows styles and fonts from
 * its own origin only, so nothing comes from Google Fonts or another CDN.
 */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-sans-latin-400-normal-7-RDbvM.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: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-sans-latin-ext-400-normal-5Cub1ia.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: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/instrument-sans-latin-500-normal-VVB9NwE.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: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/instrument-sans-latin-ext-500-normal-TbmHqLW.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: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/instrument-sans-latin-700-normal-btBlRfk.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: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/instrument-sans-latin-ext-700-normal-0fAqfWS.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal-78NWkmx.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-ext-400-normal-WlFXyXd.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal-QJNNIVc.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-ext-500-normal-Uqu9TNw.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 {
    /* Brand */
    --klopt-ink: #121614;          /* text, dark surfaces */
    --klopt-green: #127A52;        /* the accent: logo dot, "Klopt" status, links on hover */
    --klopt-green-on-dark: #47C98C;/* accent on --klopt-ink */
    --klopt-paper: #F5F7F4;        /* page background */
    --klopt-white: #FFFFFF;        /* cards, alternating sections */

    /* Neutrals */
    --klopt-text-2: #3E4541;       /* body copy on light */
    --klopt-text-3: #59605B;       /* captions, labels (4.5:1 on white) */
    --klopt-text-on-dark-2: #C7CEC9;
    --klopt-line: #E0E5E1;
    --klopt-line-soft: #EEF1EE;
    --klopt-input-line: #C9CFCB;

    /* Status (one per Outcome / request state — always pair with a label and its own glyph shape) */
    --klopt-status-verified: #127A52;        /* "Klopt" — outcome verified */
    --klopt-status-verified-bg: #E3F1EA;
    --klopt-status-verified-text: #0E6342;
    --klopt-status-not-verified: #C2362B;    /* "Klopt niet" — outcome not_verified */
    --klopt-status-not-verified-bg: #F8E1DE;
    --klopt-status-not-verified-text: #A32A21;
    --klopt-status-inconclusive: #C9850F;    /* "Onduidelijk" — outcome inconclusive */
    --klopt-status-inconclusive-bg: #F7ECD6;
    --klopt-status-inconclusive-text: #7A4F00;
    --klopt-status-pending: #8A918C;         /* "Bezig" (open, in_progress) and "Gestopt" (expired, declined, cancelled) */
    --klopt-status-pending-bg: #ECEEEC;
    --klopt-status-pending-text: #4A514D;

    /* Type */
    --klopt-font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --klopt-font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --klopt-tracking-display: -0.055em;      /* logo and h1 */
    --klopt-tracking-heading: -0.04em;       /* h2 */

    /* Shape */
    --klopt-radius: 8px;
    --klopt-radius-pill: 999px;
    --klopt-target: 44px;                    /* minimum touch target */
}

/*
 * The word mark in live text (templates/_klopt_logo.html.twig), built as the
 * handoff says: Instrument Sans 700 with the display tracking, then the dot,
 * 0.26em across, its foot on the foot of the t. The word takes the colour of
 * the text around it, and the dot is green.
 */
.klopt-logo {
    font-family: var(--klopt-font);
    font-weight: 700;
    letter-spacing: var(--klopt-tracking-display);
    white-space: nowrap;
}

.klopt-logo svg {
    display: inline-block;
    width: 0.26em;
    height: 0.26em;
    margin-left: 0.08em;
    vertical-align: -0.03em;
    fill: var(--klopt-green);
}

/* In a heading, the dot is the rings of the logo, 0.24em across */
.klopt-logo.rings svg {
    width: 0.24em;
    height: 0.24em;
    stroke: var(--klopt-green);
}

/*
 * Buttons are pills, at least 52 px high: ink, with paper text. A link styled
 * as one too. The hover colour is the green, but not on a touch screen, where a
 * tapped button would keep it.
 */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.75rem 1.625rem;
    border: 0;
    border-radius: var(--klopt-radius-pill);
    background: var(--klopt-ink);
    color: var(--klopt-paper);
    font: inherit;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.button[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* The second choice next to a button: an ink outline, no fill */
.button.outline {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--klopt-ink);
    color: var(--klopt-ink);
}

@media (hover: hover) {
    .button:hover:not([disabled]) {
        background: var(--klopt-green);
        color: var(--klopt-white);
    }

    .button.outline:hover:not([disabled]) {
        background: transparent;
        box-shadow: inset 0 0 0 1.5px var(--klopt-green);
        color: var(--klopt-green);
    }
}