/*
 * HCN Management — design tokens (single source of truth).
 * Raw brand hex values live ONLY in this file. Every other stylesheet references these variables.
 *
 * Button rule: a filled gold button carries BLACK text (--hcn-color-brand-text = #1C1C1D). White on
 * gold measures 2.99:1 and fails every WCAG threshold including large text; black measures 5.70:1 and
 * passes at every size. Gold is a surface, an accent, a border, an icon and a focus device — not an ink.
 * Where gold-coloured TEXT must sit on white, use --hcn-color-brand-strong (#8F6E46, 4.68:1).
 *
 * P4 (owner rule for HCN ADMIN buttons): a filled admin button carries WHITE text, so it sits on the darker
 * gold --hcn-color-btn-primary-bg (#8F6E46, 4.68:1) or on charcoal --hcn-color-btn-secondary-bg — never on
 * #B38F64. Applied in admin-shell.css, scoped to .hcn-shell. The black-on-gold rule above still governs the
 * front end (Mijn HCN, registration) and the gold status badges.
 *
 * Colour semantics, locked. Do not interchange them for visual variety:
 *   GOLD      identity, primary action, premium emphasis
 *   GREEN     successful, completed, saved, positive state
 *   RED       destructive, invalid, blocking error
 *   BLUE      link, information, help
 *   AMBER     warning, uncertain, needs confirmation
 *   CHARCOAL / BLACK  typography and dark premium surfaces
 *   WHITE     clean surfaces, and text on sufficiently dark semantic colours
 *
 * Every filled pairing below is measured; the ratio is recorded beside it. Status is never carried by
 * colour alone anywhere in this system.
 */

/*
 * HCN Inter — the one text face for every HCN screen (owner decision 2026-10-23: one font site-wide).
 * Self-hosted, variable weight, Inter 4 (fontsource 5.2.5), SIL OFL (assets/fonts/inter/OFL.txt).
 * Two subsets: Latin, and Latin Extended so Turkish, Polish and other names (ş, ğ, İ, ł) stay in the
 * same face instead of dropping to a system font. Arabic falls back to Noto Kufi Arabic where the site
 * loads it. The browser downloads a subset only when the page uses one of its characters.
 */
@font-face {
    font-family: "HCN Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/inter/inter-latin-wght-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "HCN Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/inter/inter-latin-ext-wght-normal.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 {
    /* --- HCN brand palette (approved) --- */
    --hcn-gold: #B38F64;
    --hcn-charcoal: #2D2E2F;
    --hcn-black: #1C1C1D;
    --hcn-white: #FFFFFF;

    /* --- Semantic colours --- */
    --hcn-color-brand: var(--hcn-gold);
    --hcn-color-brand-text: var(--hcn-black);      /* text ON canonical gold — 5.70:1. Never white (2.99:1) */
    --hcn-color-brand-soft: #F4EEE5;               /* soft gold tint: active nav, focus halo */
    --hcn-color-brand-strong: #8F6E46;             /* darker gold for icons/text needing contrast on white */
    --hcn-color-brand-hover: #9a7a50;              /* gold hover state for buttons */

    /* --- Filled action buttons, WHITE ink ---------------------------------
       A second, darker button family, added for the Communication → Automations
       screens. Canonical gold (#B38F64) cannot carry white text — 2.99:1 — so a
       white-ink button must sit on a darker gold, not on the brand colour with
       the ink swapped. These are ADDITIVE: --hcn-color-brand and
       --hcn-color-brand-text are untouched, and every surface already using
       gold-with-black keeps it until it opts in. Each ratio below is measured
       against #FFFFFF. */
    --hcn-color-btn-primary-bg: #8F6E46;           /* white on this — 4.68:1, AA at any size */
    --hcn-color-btn-primary-bg-hover: #7C5F3C;     /* white on this — 5.90:1 */
    --hcn-color-btn-secondary-bg: #3C3D3F;         /* white on this — 10.88:1 */
    --hcn-color-btn-secondary-bg-hover: #2D2E2F;   /* white on this — 13.61:1 */
    --hcn-color-btn-ink: var(--hcn-white);         /* the ink for both of the above */
    /* P4: one disabled state for every filled HCN admin button. A flat neutral surface with dark ink
       (5.42:1) — never white text on a faded or pale fill. Disabled is also said by the cursor and by
       the control's own disabled state, never by colour alone. */
    --hcn-color-btn-disabled-bg: #ECE8E1;
    --hcn-color-btn-disabled-ink: #625C53;         /* on the disabled surface — 5.42:1 */
    --hcn-color-btn-focus: #8F6E46;                /* solid focus ring, 4.68:1 on white (the halo token is 1.74:1) */

    --hcn-color-text: var(--hcn-charcoal);         /* default body text */
    --hcn-color-heading: var(--hcn-black);
    --hcn-color-surface: var(--hcn-white);
    --hcn-color-surface-dark: var(--hcn-black);    /* dark panels; pair with white text */
    --hcn-color-surface-charcoal: var(--hcn-charcoal);
    --hcn-color-on-dark: var(--hcn-white);
    --hcn-color-border: #d0d3d6;
    --hcn-color-border-strong: #9aa0a6;
    --hcn-color-border-soft: #e4e6e9;              /* card edges (shell sidebar, dropdowns) */
    --hcn-color-border-faint: #f0f1f3;             /* hairline separators inside cards */
    --hcn-color-muted: #5a5f66;
    --hcn-color-subtle: var(--hcn-color-muted);    /* secondary/label text — alias kept for readability at call sites */
    --hcn-color-subtle-bg: #f6f7f7;

    /* --- Status colours (kept separate from the brand palette, centralised here) ---
       One semantic family, used by Registration V2, R1, the admin screens, dialogs, cards, statuses
       and buttons alike. No parallel one-off hex value is ever introduced beside these. */

    /* GREEN — success, completed, saved, verified. */
    --hcn-color-success: #1E7A4D;                  /* filled success: white text, 5.14:1 */
    --hcn-color-success-base: #25935F;             /* the historical progress green; surfaces and bars */
    --hcn-color-success-text: var(--hcn-white);    /* text ON --hcn-color-success only */
    --hcn-color-success-bg: #e6f4ea;               /* very light green surface; use dark text on it */
    --hcn-color-progress: var(--hcn-color-success-base);  /* wizard progress bar — never white text on it */

    /* AMBER — warning, uncertain, needs confirmation. A warning is NOT an error: uncertain data stays
       amber and only becomes red when it is genuinely missing or invalid. */
    --hcn-color-warning: #8a6100;
    --hcn-color-warning-bg: #fff4d6;

    /* RED — destructive and blocking only. Never decoration, never an ordinary warning. */
    --hcn-color-error: #B42318;                    /* filled danger: white text, 6.35:1 */
    --hcn-color-danger: var(--hcn-color-error);    /* alias: the delete/remove family reads better this way */
    --hcn-color-danger-text: var(--hcn-white);
    --hcn-color-error-bg: #fdeceb;                 /* very light red surface; use dark text on it */

    /* BLUE — links, help and information. Used where gold would falsely imply a primary action. */
    --hcn-color-info: #1D4ED8;                     /* 6.30:1 on white, and white on it is 6.30:1 */
    --hcn-color-link: var(--hcn-color-info);
    --hcn-color-link-hover: #1E40AF;               /* darker blue for hover/active */
    --hcn-color-info-bg: #e8f0fe;                  /* very light blue surface; use dark text on it */

    --hcn-color-neutral: #646970;
    --hcn-color-neutral-bg: #f0f0f1;

    /* --- Mijn HCN, signed in (D-94C2A, owner-approved V18) ---------------
       The pilgrim's own screens carry a warmer, lighter palette than the admin: a charcoal header band,
       a cream hover, one green for "done" and one orange for the staff banner. They are declared here,
       beside the rest of the brand, so no raw brand value lives in a stylesheet. Each ratio is measured.
       The green is V18's own (#207B4E), one shade darker than --hcn-color-success-base, and the two are
       deliberately separate: the admin keeps its green, the pilgrim screens keep theirs. */
    --hcn-color-mijn-green: #207B4E;               /* white on it 5.01:1; on #e8f5ec 4.55:1 */
    --hcn-color-mijn-green-deep: #19653F;          /* hover for the filled green button, white 6.59:1 */
    --hcn-color-mijn-hover-cream: #f9e7d1;         /* header/menu hover, used at low opacity on charcoal */
    --hcn-color-mijn-staff: #C45211;               /* staff "Admin Access Mode" band; white on it 4.58:1 */
    --hcn-color-mijn-sand-top: #F4EEE5;            /* service card gradient, top */
    --hcn-color-mijn-sand-mid: #F8F4EE;            /* service card gradient, middle */
    /* Mijn HCN rebuild (0.65.0-dev) — Gegevens, the member editor, the review and Mijn gezin. */
    --hcn-color-mijn-field-line: #8b8379;          /* input and chip boundary: 3.74:1 on white (WCAG 1.4.11) */
    --hcn-color-mijn-ink-soft: #4d4b47;            /* secondary running text: 8.70:1 on white */
    --hcn-color-mijn-ink-muted: #4a4c4d;           /* a removed traveller's name: 8.19:1 on the panel */
    --hcn-color-mijn-placeholder: #6d6964;         /* placeholder text: 5.45:1 on white */
    --hcn-color-mijn-success-line: #bfe0cb;        /* edge of a green notice (decorative; the text carries it) */
    --hcn-color-mijn-error-line: #f0c4c0;          /* edge of a red notice (decorative) */
    --hcn-color-mijn-amber-line: #ecd9a6;          /* edge of the "Nog nodig" panel and its jump chips */
    --hcn-color-mijn-error-ink: #6f2422;           /* body text in the error summary: 9.78:1 on #fff1ef */
    --hcn-color-mijn-error-link: #8a2624;          /* links in the error summary: 8.01:1 on #fff1ef */

    /* --- Spacing --- */
    --hcn-space-1: 4px;
    --hcn-space-2: 8px;
    --hcn-space-3: 12px;
    --hcn-space-4: 16px;
    --hcn-space-5: 20px;
    --hcn-space-6: 24px;

    /* --- Mijn HCN → Service uitbreiden (owner-approved Luxury V2, 0.79.0-dev) ---
       The V8 palette Registration V2 Step 1 already uses (HCN green #085438 for the selected tab and the
       price, ivory and sage surfaces, the gold call to action), so the upgrade reads as the same product.
       Four prototype greys were darkened to reach AA on their surfaces (kicker, list lead, notes). */
    --hcn-color-upg-green: #085438;                /* white on it 8.99:1 */
    --hcn-color-upg-green-deep: #063d2b;
    --hcn-color-upg-ink: #18332a;                  /* 13.59:1 on white */
    --hcn-color-upg-text: #374c3f;                 /* 9.26:1 */
    --hcn-color-upg-muted: #5d6d64;                /* 5.47:1 */
    --hcn-color-upg-quiet: #64746b;                /* 4.94:1 on white, 4.72:1 on the page */
    --hcn-color-upg-kicker: #85643b;               /* 5.41:1 (prototype #957247 measured 4.40:1) */
    --hcn-color-upg-line: #dce3d9;
    --hcn-color-upg-line-soft: #ecede9;
    --hcn-color-upg-field-line: #b9c9bd;
    --hcn-color-upg-tint: #f7f9f6;
    --hcn-color-upg-tint-hover: #edf4ee;
    --hcn-color-upg-mist: #edf6ed;
    --hcn-color-upg-page: #f8f7f4;
    --hcn-color-upg-reveal: #fbfcfa;
    --hcn-color-upg-price-1: #f3f6f1;
    --hcn-color-upg-price-2: #faf9f4;
    --hcn-color-upg-price-3: #fdfaf3;
    --hcn-color-upg-badge-line: #d2e3d5;
    --hcn-color-upg-pin: #bd9c67;
    --hcn-color-upg-gold-hover: #785a37;           /* white on it 6.33:1 */
    --hcn-color-upg-error: #a22b2b;                /* 7.20:1 */
    --hcn-color-upg-error-soft: #fdf0ef;

    /* --- Registration V2 → Registratie ontvangen (owner-approved Luxury V1, 0.80.0-dev) ---
       The prototype's palette: HCN green #185F3C, luxury gold #B38F64, the dark gold action #8F6E46,
       white and ivory surfaces, warm sage lines. Every prototype grey that fell below 4.5:1 on its
       surface was darkened (route, notes, captions, the mail card's label); measured values below. */
    --hcn-color-rcv-green: #185f3c;                /* 7.66:1 on white; white on it 7.66:1 */
    --hcn-color-rcv-green-deep: #104b30;
    --hcn-color-rcv-ink: #192f25;                  /* body ink, 14.24:1 */
    --hcn-color-rcv-heading: #183627;
    --hcn-color-rcv-text: #56675c;                 /* leads: 6.02:1 on white, 5.61:1 on the activation tint */
    --hcn-color-rcv-muted: #5f6f63;                /* notes: 5.33:1 on white, 4.97:1 on the tint */
    --hcn-color-rcv-label: #3f6d4d;                /* "Uw volgende stap": 5.58:1 on the tint */
    --hcn-color-rcv-kicker: #85643b;               /* gold captions: 5.41:1 (prototype #957c59 was 3.96:1) */
    --hcn-color-rcv-gold: #b38f64;                 /* decorative only: the band, icons */
    --hcn-color-rcv-gold-action: #8f6e46;          /* white on it 4.68:1 */
    --hcn-color-rcv-gold-hover: #795a37;           /* white on it 6.31:1 */
    --hcn-color-rcv-line: #e1e5de;
    --hcn-color-rcv-line-card: #dee5de;
    --hcn-color-rcv-line-warm: #e8e2d7;
    --hcn-color-rcv-control-line: #7f9585;         /* outline of a secondary control: 3.21:1 */
    --hcn-color-rcv-page: #f8f8f6;
    --hcn-color-rcv-ivory-1: #fffdf9;
    --hcn-color-rcv-ivory-2: #fbf7f0;
    --hcn-color-rcv-tint-1: #f4f8f4;
    --hcn-color-rcv-tint-2: #fafbf7;
    --hcn-color-rcv-tint-3: #faf7f0;
    --hcn-color-rcv-mint: #eaf5ee;
    --hcn-color-rcv-mint-line: #d2e9d9;
    --hcn-color-rcv-step: #f1f7f1;
    --hcn-color-rcv-step-line: #dce7dd;
    --hcn-color-rcv-soft: #f3f5f1;
    --hcn-color-rcv-hover: #eef6ef;
    --hcn-color-rcv-dot: #2c9a58;                  /* decorative dot beside "Uw volgende stap" */
    --hcn-color-rcv-ok-soft: #f0f8f1;
    --hcn-color-rcv-ok-line: #d4e5d8;
    --hcn-color-rcv-ok-ink: #1f5a37;               /* 7.53:1 on its soft green */
    --hcn-color-rcv-warn-soft: #fbf6ea;
    --hcn-color-rcv-warn-line: #ead9b4;
    --hcn-color-rcv-warn-ink: #6b4e1f;             /* 7.12:1 on its soft amber */
    --hcn-color-rcv-error-soft: #fff5f3;
    --hcn-color-rcv-error-line: #ebcac6;
    --hcn-color-rcv-error-ink: #8d3a33;            /* 7.04:1 on its soft red */

    /* --- Mijn HCN → Beveiliging, password change (owner-approved Luxury V1, 2026-10-24) ---
       The prototype's palette; greys and the field border darkened where they missed AA (text 4.5:1,
       control borders 3:1). */
    --hcn-color-sec-green: #185F3C;                /* white on it 7.66:1 */
    --hcn-color-sec-green-deep: #0B4E33;
    --hcn-color-sec-ink: #21362c;                  /* 12.89:1 on white */
    --hcn-color-sec-text: #415247;                 /* 8.32:1 */
    --hcn-color-sec-muted: #5f6f63;                /* 5.02:1 on the page */
    --hcn-color-sec-quiet: #66756c;                /* 4.85:1 (prototype #7e897f measured 3.64:1) */
    --hcn-color-sec-crumb: #85643b;                /* 5.10:1 on the page (prototype #99744c 3.99:1) */
    --hcn-color-sec-line: #e1e7df;
    --hcn-color-sec-line-soft: #ecf0eb;
    --hcn-color-sec-field-line: #7f9585;           /* 3.21:1 against white, the control-border minimum */
    --hcn-color-sec-page: #f9f8f6;
    --hcn-color-sec-aside-1: #f3f7f1;
    --hcn-color-sec-aside-2: #fbf9f4;
    --hcn-color-sec-aside-3: #f8f5eb;
    --hcn-color-sec-aside-line: #dfe8dc;
    --hcn-color-sec-mist: #e3f0e5;
    --hcn-color-sec-check: #0c6844;                /* 5.80:1 on the mist */
    --hcn-color-sec-ok-soft: #edf7f0;
    --hcn-color-sec-ok-line: #cce5d3;
    --hcn-color-sec-ok-ink: #185839;               /* 7.68:1 */
    --hcn-color-sec-error: #ac3232;                /* 6.45:1 */
    --hcn-color-sec-error-soft: #fff5f3;
    --hcn-color-sec-error-line: #ebcac6;
    --hcn-color-sec-error-ink: #8d3a33;            /* 7.04:1 */
    --hcn-color-sec-gold-hover: #795a37;           /* white on it 6.33:1 */

    /* --- Mijn HCN → Mijn gezin & reizigersprofiel (owner-approved Luxury V4, 0.81.0-dev) ---
       The prototype's palette: HCN green #185F3C, luxury gold #B38F64 (decorative), the dark gold action
       #8F6E46, ivory and sage surfaces. Every grey the prototype used below 4.5:1 is darkened, every control
       border reaches 3:1, and each indicator state has its own ink on its own tint (all measured below). */
    --hcn-color-gzn-green: #185f3c;                /* 7.66:1 on white; white on it 7.66:1 */
    --hcn-color-gzn-green-deep: #0c5133;
    --hcn-color-gzn-ink: #1c372a;                  /* headings 12.89:1 */
    --hcn-color-gzn-text: #2b4838;                 /* values 10.06:1 */
    --hcn-color-gzn-muted: #5c6b61;                /* leads, labels: 5.63:1 on white, 5.25:1 on the page */
    --hcn-color-gzn-kicker: #85643b;               /* gold captions: 5.41:1 on white, 5.15:1 on ivory */
    --hcn-color-gzn-gold: #b38f64;                 /* decorative only: the crown, the main card's border tint */
    --hcn-color-gzn-gold-action: #8f6e46;          /* white on it 4.68:1 */
    --hcn-color-gzn-gold-hover: #795a37;           /* white on it 6.31:1 */
    --hcn-color-gzn-gold-ink: #795931;             /* copy control and crown ink: 5.88:1 on its tint */
    --hcn-color-gzn-page: #f8f7f3;
    --hcn-color-gzn-surface: #ffffff;
    --hcn-color-gzn-ivory: #fdf9f1;                /* the main applicant's card */
    --hcn-color-gzn-ivory-line: #d6c3a6;           /* its light gold border */
    --hcn-color-gzn-gold-tint: #f7efdf;            /* role pill: #7a5a2e on it 5.52:1 */
    --hcn-color-gzn-gold-tint-ink: #7a5a2e;
    --hcn-color-gzn-gold-soft: #f9f5ed;
    --hcn-color-gzn-sage: #f1f4f0;                 /* companion pill: #4f6455 on it 5.76:1 */
    --hcn-color-gzn-sage-ink: #4f6455;
    --hcn-color-gzn-mist: #edf6ef;                 /* green tints: #185f3c on it 6.94:1 */
    --hcn-color-gzn-mist-2: #f6f8f3;
    --hcn-color-gzn-line: #e1e7df;
    --hcn-color-gzn-line-soft: #ecefea;
    --hcn-color-gzn-control-line: #7f9585;         /* control borders: 3.21:1 against white */
    --hcn-color-gzn-button-line: #b9c8bc;          /* outline of a labelled light button (decorative; the label names it) */
    --hcn-color-gzn-ok: #0f6b45;                   /* on #eaf6ed 5.89:1 */
    --hcn-color-gzn-ok-soft: #eaf6ed;
    --hcn-color-gzn-ok-line: #cfe5d6;
    --hcn-color-gzn-review: #55645a;               /* on #f4f4ef 5.67:1 */
    --hcn-color-gzn-review-soft: #f4f4ef;
    --hcn-color-gzn-received: #3f5d4c;             /* on #f1f5f0 6.61:1 */
    --hcn-color-gzn-received-soft: #f1f5f0;
    --hcn-color-gzn-missing: #7a5426;              /* on #fbf3e6 6.10:1 */
    --hcn-color-gzn-missing-soft: #fbf3e6;
    --hcn-color-gzn-missing-line: #ecd9b9;
    --hcn-color-gzn-attention: #a0402c;            /* on #fdeeea 5.70:1 */
    --hcn-color-gzn-attention-soft: #fdeeea;
    --hcn-color-gzn-attention-line: #efc9bf;
    --hcn-color-gzn-unknown: #5b675e;              /* on #f4f4f0 5.37:1 */
    --hcn-color-gzn-unknown-soft: #f4f4f0;
    --hcn-color-gzn-warn-ink: #6b4e1f;             /* the validity notice: 7.12:1 on #fbf6ea */
    --hcn-color-gzn-warn-soft: #fbf6ea;
    --hcn-color-gzn-warn-line: #ead9b4;
    --hcn-color-gzn-error-ink: #8a3f2f;            /* 6.73:1 on #fff1ee */
    --hcn-color-gzn-error-soft: #fff1ee;
    --hcn-color-gzn-error-line: #e7c2b9;
    --hcn-color-gzn-shadow: rgba(34, 49, 39, .065);
    --hcn-color-gzn-gold-shadow: rgba(132, 94, 54, .16);

    /* --- Communication Center → API Tokens (owner-approved Luxury V2, 0.84.0-dev) ---
       The prototype's palette: HCN green #185F3C for the verify action, luxury gold #B38F64 (decorative)
       and the dark gold action #8F6E46, white panels on sage lines. Every grey the prototype used below
       4.5:1 is darkened, control borders reach 3:1, and each status has its own ink on its own tint
       (all measured below, WCAG 2.x relative luminance). */
    --hcn-color-tok-green: #185f3c;                /* 7.66:1 on white; white on it 7.66:1 */
    --hcn-color-tok-green-deep: #0c5133;           /* hover: white on it 9.37:1 */
    --hcn-color-tok-ink: #19342b;                  /* headings 13.40:1 */
    --hcn-color-tok-text: #2b4838;                 /* values 10.06:1; 9.59:1 on the tech panel */
    --hcn-color-tok-muted: #5c6b61;                /* notes, labels: 5.63:1 on white, 5.36:1 on the tint */
    --hcn-color-tok-kicker: #85643b;               /* gold eyebrow: 5.41:1 (prototype #936d3f on 10px) */
    --hcn-color-tok-gold: #b38f64;                 /* decorative only: the step numbers' ring */
    --hcn-color-tok-gold-action: #8f6e46;          /* white on it 4.68:1 */
    --hcn-color-tok-gold-hover: #795a37;           /* white on it 6.31:1 */
    --hcn-color-tok-gold-ink: #795931;             /* Replace token: 5.94:1 on its tint */
    --hcn-color-tok-gold-tint: #fbf6ee;
    --hcn-color-tok-gold-line: #e0cbb0;
    --hcn-color-tok-icon-tint: #f8f3e9;
    --hcn-color-tok-icon-line: #f0e7d7;
    --hcn-color-tok-surface: #ffffff;
    --hcn-color-tok-tint: #f8faf7;                 /* the technical panel, the aside */
    --hcn-color-tok-line: #e2e6df;
    --hcn-color-tok-line-soft: #ecf0eb;
    --hcn-color-tok-control-line: #7f9585;         /* control borders: 3.21:1 against white */
    --hcn-color-tok-button-line: #b9c8bc;          /* outline of a labelled light button (the label names it) */
    --hcn-color-tok-hover: #f4f8f4;
    --hcn-color-tok-notice: #f3f8f3;               /* the separation notice: #2f5140 on it 8.23:1 */
    --hcn-color-tok-notice-ink: #2f5140;
    --hcn-color-tok-notice-line: #dceadd;
    --hcn-color-tok-ok: #0f6b45;                   /* on #eaf6ed 5.89:1 */
    --hcn-color-tok-ok-soft: #eaf6ed;
    --hcn-color-tok-ok-line: #cfe5d6;
    --hcn-color-tok-warn: #7a5426;                 /* on #fbf3e6 6.10:1 */
    --hcn-color-tok-warn-soft: #fbf3e6;
    --hcn-color-tok-warn-line: #ecd9b9;
    --hcn-color-tok-bad: #a0402c;                  /* on #fdeeea 5.70:1; on white 6.43:1 */
    --hcn-color-tok-bad-soft: #fdeeea;
    --hcn-color-tok-bad-tint: #fff8f6;
    --hcn-color-tok-bad-line: #efc9bf;
    --hcn-color-tok-neutral: #55645a;              /* on #f4f4ef 5.67:1 */
    --hcn-color-tok-neutral-soft: #f4f4ef;
    --hcn-color-tok-neutral-line: #e2e4dc;
    --hcn-color-tok-good-tint: #f3faf3;
    --hcn-color-tok-shadow: rgba(32, 45, 30, .055);
    --hcn-color-tok-shadow-strong: rgba(24, 40, 30, .28); /* the switch knob's lift */
    /* Templates V4 (0.86.0-dev): the WhatsApp preview is drawn in WhatsApp's own colours, not HCN's —
       it shows what the family's app shows. Text pairs: ink on bubble 15.75:1, meta on bubble 5.94:1. */
    --hcn-color-wa-frame: #1c2420;
    --hcn-color-wa-bar: #0f5c4f;            /* white on it 7.88:1 */
    --hcn-color-wa-avatar: #1a7a50;         /* white on it 5.33:1 */
    --hcn-color-wa-chat: #efe7dd;
    --hcn-color-wa-bubble: #d9fdd3;
    --hcn-color-wa-ink: #111b21;
    --hcn-color-wa-meta: #4f6159;
    --hcn-color-wa-link: #00699a;           /* on the bubble 5.43:1 */
    --hcn-color-wa-shadow: rgba(0, 0, 0, .12);
    /* Templates V4 Refined (0.87.0-dev): the dropdown's status dot (graphics, ≥3:1 on white) */
    --hcn-color-tv4-dot-draft: #b7841b;           /* 3.32:1 on white */
    --hcn-color-tv4-dot-off: #7f8b84;             /* 3.54:1 on white */
    /* In-app severity: text on its own tint */
    --hcn-color-tv4-sev-info: #375b7c;            /* on #eff5fb 6.48:1 */
    --hcn-color-tv4-sev-info-soft: #eff5fb;
    --hcn-color-tv4-sev-info-line: #b4c8dc;
    --hcn-color-tv4-sev-success: #185f3c;         /* on #ecf8ef 7.02:1 */
    --hcn-color-tv4-sev-success-soft: #ecf8ef;
    --hcn-color-tv4-sev-success-line: #a8d4b0;
    --hcn-color-tv4-sev-warning: #7c4f12;         /* on #fff7e4 6.59:1 */
    --hcn-color-tv4-sev-warning-soft: #fff7e4;
    --hcn-color-tv4-sev-warning-line: #e2c277;
    --hcn-color-tv4-sev-critical: #aa332d;        /* on #fff0ef 5.89:1 */
    --hcn-color-tv4-sev-critical-soft: #fff0ef;
    --hcn-color-tv4-sev-critical-line: #dfa3a0;
    --hcn-color-tv4-backdrop: rgba(20, 28, 24, .55);
    --hcn-color-tv4-dialog-shadow: rgba(20, 28, 24, .35);
    /* Settings Luxury V2 (0.85.0-dev) uses this same block: one Communication Center V2 palette. */

    /* --- Payments Operations Luxury V2.1 (0.89.0-dev, HCN → Betalingen) ---
       Owner-approved V2.1: brown #926D42 for the active tab and the one primary action, darker
       #74532F for brown text and hover; HCN green #185F3C ONLY for provider-verified PAID; every
       grey darkened to 4.5:1 or better on its surface. */
    --hcn-color-pay-brown: #926d42;               /* white on it 4.68:1 */
    --hcn-color-pay-brown-dark: #74532f;          /* 6.95:1 on white; white on it 6.95:1 */
    --hcn-color-pay-brown-soft: #f3eee6;
    --hcn-color-pay-rail: #eeece8;                /* tab rail; #26322d on it 11.29:1 */
    --hcn-color-pay-rail-line: #e2ded6;
    --hcn-color-pay-rail-hover: #e3ddd4;
    --hcn-color-pay-ink: #26322d;
    --hcn-color-pay-heading: #1f3a2c;
    --hcn-color-pay-muted: #5c6a61;               /* 5.69:1 on white, 5.41:1 on #faf9f6 */
    --hcn-color-pay-line: #e4e8e1;
    --hcn-color-pay-line-strong: #d4ddd4;
    --hcn-color-pay-surface: #ffffff;
    --hcn-color-pay-tint: #f8faf7;
    --hcn-color-pay-ivory: #faf8f2;
    --hcn-color-pay-hero-from: #674a30;           /* white on it 8.08:1 */
    --hcn-color-pay-hero-to: #8a6741;             /* white on it 5.13:1 */
    --hcn-color-pay-hero-soft: #f4e9da;           /* on the hero gradient end 4.5:1+ at 12px */
    --hcn-color-pay-paid: #185f3c;                /* HCN green; on #e8f4e9 6.77:1 — provider-verified PAID only */
    --hcn-color-pay-paid-soft: #e8f4e9;
    --hcn-color-pay-paid-line: #c6dfc9;
    --hcn-color-pay-open: #7a5a1c;                /* on #fff4dd 5.82:1 */
    --hcn-color-pay-open-soft: #fff4dd;
    --hcn-color-pay-open-line: #ecd7ad;
    --hcn-color-pay-failed: #8f3c39;              /* on #fff0ed 6.59:1 */
    --hcn-color-pay-failed-soft: #fff0ed;
    --hcn-color-pay-failed-line: #efcfc9;
    --hcn-color-pay-waiting: #4f5f57;             /* on #f0f4f2 6.09:1 */
    --hcn-color-pay-waiting-soft: #f0f4f2;
    --hcn-color-pay-waiting-line: #dbe3de;
    --hcn-color-pay-free: #55635a;                /* on #f2f4f0 5.72:1 */
    --hcn-color-pay-free-soft: #f2f4f0;
    /* Exceptions red (owner 0.90.0): #ed8e8e is a background only — never text, never on its own as a signal */
    --hcn-color-pay-alert: #ed8e8e;               /* counter, chip and icon fill; #5e1717 on it 5.5:1 */
    --hcn-color-pay-alert-ink: #5e1717;           /* text and icons on red; 11.31:1 on #fcebeb, 13.04:1 on white */
    --hcn-color-pay-alert-line: #b94a4a;          /* borders; 4.4:1 on #fcebeb, 5.07:1 on white */
    --hcn-color-pay-alert-tint: #fcebeb;          /* critical row and banner surface */
    --hcn-color-pay-open-card: #faf8f4;           /* Openstaande opdrachten card; #5c6a61 on it 5.37:1 */
    --hcn-color-pay-backdrop: rgba(20, 28, 24, .5);
    --hcn-color-pay-shadow: rgba(21, 42, 32, .08);

    /* --- PAY-21 help drawer (0.100.1-dev, Betalingen → Onbeantwoorde poging onderzoeken) ---
       HCN green is the drawer's own chrome (header, trigger); inside the help a STATUS is never green
       unless Mollie confirmed it PAID (that uses --hcn-color-pay-paid). Gold is decorative: hairline, disc. */
    --hcn-color-help-green: #185f3c;              /* white on it 7.66:1 */
    --hcn-color-help-green-dark: #124a2f;         /* hover; white on it 10.26:1 */
    --hcn-color-help-on-green: #ffffff;
    --hcn-color-help-on-green-muted: #d6e6db;     /* 5.91:1 on the green */
    --hcn-color-help-gold: #b38f64;               /* decorative only — never text on white, never text on green */
    --hcn-color-help-gold-ink: #1c1c1d;           /* text on the gold disc 5.70:1 */
    --hcn-color-help-gold-soft: #f4eee5;          /* the green on it 6.64:1 */
    --hcn-color-help-scrim: rgba(20, 28, 24, .45);
    --hcn-color-help-shadow: rgba(20, 28, 24, .28);
    --hcn-color-help-fab-shadow: rgba(20, 28, 24, .2); /* 0.100.2-dev: the floating help button's soft shadow */

    /* --- Radius --- */
    --hcn-radius-sm: 6px;
    --hcn-radius-md: 8px;
    --hcn-radius-lg: 12px;
    --hcn-radius-pill: 999px;

    /* --- Typography --- */
    --hcn-font: "HCN Inter", "Inter", "Noto Kufi Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --hcn-font-mono: ui-monospace, Menlo, Consolas, monospace;
    --hcn-fs-xs: 11px;
    --hcn-fs-sm: 12px;
    --hcn-fs-base: 17px;
    --hcn-fs-lg: 1.25em;
    --hcn-fs-xl: 1.6em;

    /* --- Section / card header text (title above a card body, e.g. "Agency information",
       "Season Details"). One scale, reused on every admin page — never redefine locally. --- */
    --hcn-fs-section-title: 14px;
    --hcn-fw-section-title: 700;
    --hcn-color-section-title: var(--hcn-color-heading);
    --hcn-fs-section-desc: var(--hcn-fs-sm);
    --hcn-color-section-desc: var(--hcn-color-muted);

    /* --- Field label text (the small caption before a value, e.g. "Agency name",
       "Status", "Availability"). One scale, reused on every admin page. --- */
    --hcn-fs-field-label: 13px;
    --hcn-fw-field-label: 600;
    --hcn-color-field-label: var(--hcn-color-muted);

    /* --- Mijn HCN → Betaling (owner-approved Luxury V2, Mollie Phase 3, 0.95.0-dev) ---
       The approved combined prototype's palette. Its status chips keep their own ink on their own tint (all
       4.6:1 or better, measured below); every grey it used below 4.5:1 (sublines #818b83, counts #738078,
       metric notes #78827a, table heads #68776d) becomes the one muted grey; the gold eyebrow is darkened. */
    --hcn-color-bet-green: #185f3c;                /* 7.66:1 on white; white on it 7.66:1 */
    --hcn-color-bet-green-deep: #104c30;           /* hover: white on it 10.01:1 */
    --hcn-color-bet-focus: #26764c;                /* the prototype's focus ring, 5.56:1 on white */
    --hcn-color-bet-ink: #242b26;                  /* 13.67:1 on the ivory card */
    --hcn-color-bet-text: #59685e;                 /* running text: 5.89:1 on white, 5.55:1 on ivory */
    --hcn-color-bet-muted: #5c6b61;                /* labels, sublines, counts: 5.63:1 / 5.31:1 on ivory / 5.16:1 on the table head */
    --hcn-color-bet-kicker: #85643b;               /* gold eyebrow: 5.41:1 (prototype #8d704d at 11px) */
    --hcn-color-bet-gold: #b38f64;                 /* decorative: the processing dot */
    --hcn-color-bet-warn: #90601b;                 /* the open dot, 5.42:1 */
    --hcn-color-bet-danger: #a24633;
    --hcn-color-bet-ivory: #faf8f4;
    --hcn-color-bet-paper: #ffffff;
    --hcn-color-bet-line: #e5e7e1;
    --hcn-color-bet-line-soft: #ebeee8;
    --hcn-color-bet-row-line: #f0f0ec;
    --hcn-color-bet-status-line: #e9d8c1;          /* the status card's light gold edge (decorative) */
    --hcn-color-bet-status-rule: #e9e1d6;
    --hcn-color-bet-chip-line: #e6e2da;
    --hcn-color-bet-button-line: #d9d9d1;          /* outline of a labelled button (decorative; the label names it) */
    --hcn-color-bet-button-hover: #faf9f6;
    --hcn-color-bet-icon-line: #e0e7df;
    --hcn-color-bet-icon-hover: #edf5ef;
    --hcn-color-bet-icon-hover-line: #b4d1be;
    --hcn-color-bet-icon-off: #87908a;             /* a disabled control (exempt from contrast, WCAG 1.4.3) */
    --hcn-color-bet-head: #f2f6f3;                 /* table head */
    --hcn-color-bet-season-line: #e4e3dc;
    --hcn-color-bet-info: #f8faf7;
    --hcn-color-bet-info-line: #e1e9e1;
    --hcn-color-bet-info-ink: #506456;             /* 6.07:1 */
    --hcn-color-bet-hint: #fbf7ed;
    --hcn-color-bet-hint-ink: #695b43;             /* 6.18:1 */
    --hcn-color-bet-dot-open-halo: #f5e8d3;
    --hcn-color-bet-dot-paid-halo: #dceee2;
    --hcn-color-bet-dot-failed-halo: #f9e6df;
    --hcn-color-bet-dot-processing-halo: #f1e7d7;
    --hcn-color-bet-paid: #126f46;                 /* on #e5f3ea 5.41:1 */
    --hcn-color-bet-paid-soft: #e5f3ea;
    --hcn-color-bet-pending: #906016;              /* on #fff2de 4.91:1 (pending, open, refund due) */
    --hcn-color-bet-pending-soft: #fff2de;
    --hcn-color-bet-failed: #a33d38;               /* on #fbedeb 5.61:1 */
    --hcn-color-bet-failed-soft: #fbedeb;
    --hcn-color-bet-cancelled: #676d69;            /* on #eff1ef 4.66:1 (cancelled, expired) */
    --hcn-color-bet-cancelled-soft: #eff1ef;
    --hcn-color-bet-refunded: #426498;             /* on #edf2fb 5.33:1 — a status word, never a control */
    --hcn-color-bet-refunded-soft: #edf2fb;
    --hcn-color-bet-recorded: #77613f;             /* on #f5f0e7 5.19:1 */
    --hcn-color-bet-recorded-soft: #f5f0e7;
    --hcn-color-bet-backdrop: rgba(23, 34, 27, .55);
    --hcn-color-bet-shadow: rgba(48, 57, 43, .035);
    --hcn-color-bet-card-shadow: rgba(30, 41, 34, .02);
    --hcn-color-bet-ledger-shadow: rgba(29, 51, 34, .04);
    --hcn-color-bet-dialog-shadow: rgba(23, 40, 29, .21);

    /* --- Focus ring --- */
    --hcn-focus-ring: 3px solid rgba(179, 143, 100, .55);   /* gold-tinted focus */
    --hcn-focus-border: var(--hcn-gold);

    /* --- Shadows --- */
    --hcn-shadow-sm: 0 1px 2px rgba(28, 28, 29, .08);
    --hcn-shadow-md: 0 2px 8px rgba(28, 28, 29, .12);

    /* --- Form heights --- */
    --hcn-input-min-h: 48px;

    /* --- Content widths --- */
    --hcn-width-narrow: 700px;
    --hcn-width-portal: 720px;
    --hcn-width-wide: 900px;
    --hcn-width-app: 820px;
}