/* Happyflex design tokens (uit Happyflex Design System) */
/* ============================================================
   HAPPYFLEX — Color tokens
   6-dimension semantic color architecture (semantic-contract v2, 2026-08-19).
   Dimension 1 Brand/Interaction · Dimension 2 Binary Decision · Dimension 3 Process Status ·
   Dimension 4 Mutation/Event · Dimension 5 Taxonomy/Type (incl. Document-category sub-family) ·
   Dimension 6 Origin/Herkomst.
   Canonical source = app globals.css @theme ("calm" palette, 2026-06-24) + SEMANTIC-CONTRACT.md.
   Never introduce loose hex in components — always reference a token.
   ============================================================ */
:root {
  /* ---------- DIMENSION 1 · Brand / Interaction ---------- */
  /* Navy — structure & brand carrier */
  --color-hf-navy: #1f3a5f;      /* headings, sidebar, topbar, active tabs, neutral emphasis */
  --color-hf-navy-700: #17304d;  /* navy hover/pressed, deeper structure */
  --color-hf-navy-50: #eef2f7;   /* navy-tint surface, active-nav background */
  --color-hf-navy-deep: #16263b; /* footer / darkest structural fill */

  /* Coral — primary action & open-marker ONLY (never a status color) */
  --color-hf-orange: #f0623a;      /* primary button, open/expanded accent bar, focus ring, selected */
  --color-hf-orange-600: #dd5230;  /* coral hover/pressed */
  --color-hf-orange-soft: #fff1ea; /* coral tint surface */

  /* Neutral / grey — canvas & structure (carries NO meaning) */
  --color-hf-bg: #f9fafb;      /* app / canvas background */
  --color-hf-panel: #ffffff;   /* panels, cards, table surface */
  --color-hf-panel-2: #f9fafb; /* subtly recessed panel */
  --color-hf-line: #e4e8ed;    /* borders, dividers */
  --color-hf-line-2: #eef1f4;  /* soft inner line */
  --color-hf-ink: #18222e;     /* primary text */
  --color-hf-ink-soft: #384452;/* secondary text */
  --color-hf-muted: #69737f;   /* muted / hint text, disabled */

  /* ---------- Semantic base (shared by Dimension 3 Process Status) ---------- */
  --color-hf-ok: #1f8a5b;      --color-hf-ok-bg: #e7f4ee;
  --color-hf-warn: #d9822b;    --color-hf-warn-bg: #fbf0e2;
  --color-hf-danger: #d23f3f;  --color-hf-danger-bg: #fbe9e9;
  --color-hf-info: #2a6fdb;    --color-hf-info-bg: #e8f0fc;
  --color-hf-bezet: #a16207;   --color-hf-bezet-bg: #fef9c3; /* system-derived "bezet/werkzaam" (yellow) */
  --color-hf-escalatie: #b0347a; --color-hf-escalatie-bg: #fbe8f2;

  /* ---------- DIMENSION 4 · Mutation / Event (physical tokens carry their original "layer-3b"/mutation stem names — legacy provenance only, semantically this is Dimension 4) ---------- */
  --color-hf-lost: #c24b45;     --color-hf-lost-bg: #f8eaea;     --color-hf-lost-line: #eac7c6;
  --color-hf-retentie: #cd863f; --color-hf-retentie-bg: #f9f1e4; --color-hf-retentie-line: #edd7b8;
  --color-hf-extra: #43885f;    --color-hf-extra-bg: #eaf4ef;    --color-hf-extra-line: #c6e2d3;
  --color-hf-ruil: #3e6ed4;     --color-hf-ruil-bg: #eaf0fb;     --color-hf-ruil-line: #c7d8f3;
  --color-hf-update: #7a4fc7;   --color-hf-update-bg: #f1ecfa;   --color-hf-update-line: #d8c8f0;
  --color-hf-nieuw: #2b8a8a;    --color-hf-nieuw-bg: #e5f2f2;    --color-hf-nieuw-line: #c2e0e0;
  --color-hf-afwezig: #8a7a66;  --color-hf-afwezig-bg: #f2ede5;  --color-hf-afwezig-line: #e0d4c3;

  /* ---------- DIMENSION 2 · Binary Decision chips (soft mint / dusty pink) ---------- */
  /* JA / positive — soft mint */
  --hf-binary-yes-bg: #e9f6ef;      --hf-binary-yes-border: #bfe3d0;  --hf-binary-yes-text: #136a45;
  --hf-binary-yes-bg-hover: #dcefe4; --hf-binary-yes-selected: #8fceac;
  /* NEE / negative — dusty pink */
  --hf-binary-no-bg: #f9ecef;       --hf-binary-no-border: #eccdd5;   --hf-binary-no-text: #a03352;
  --hf-binary-no-bg-hover: #f3e0e5;  --hf-binary-no-selected: #dda9b6;
  /* disabled (both) */
  --hf-binary-disabled-bg: #f1f3f5; --hf-binary-disabled-border: #e0e4e8; --hf-binary-disabled-text: #9aa3ac;

  /* ---------- DIMENSION 3 · Process Status chips (soft/pastel, tinted). Token stem is "hf-status"
     — legacy provenance name; semantically this is Dimension 3, lifecycle only. ---------- */
  --hf-status-concept-bg: #eef1f4;    --hf-status-concept-border: #dbe1e8;  --hf-status-concept-text: #59636f; /* dashed border */
  --hf-status-open-bg: #e6f2f6;       --hf-status-open-border: #c3dfe8;     --hf-status-open-text: #1f6b82;
  --hf-status-gepland-bg: #eaeffb;    --hf-status-gepland-border: #cdd6f4;  --hf-status-gepland-text: #3f56c4;
  --hf-status-gewerkt-bg: #e3f1ee;    --hf-status-gewerkt-border: #c2e2d9;  --hf-status-gewerkt-text: #1f7a68;
  --hf-status-bevestigd-bg: #e7f4ee;  --hf-status-bevestigd-border: #c6e2d3;--hf-status-bevestigd-text: #1f8a5b;
  --hf-status-afgerond-bg: #eef1ee;   --hf-status-afgerond-border: #d2ddd2; --hf-status-afgerond-text: #516b56;
  --hf-status-aandacht-bg: #fbf0e2;   --hf-status-aandacht-border: #f0dcc0; --hf-status-aandacht-text: #b56a1e; /* = waarschuwing */
  --hf-status-geblokkeerd-bg: #fbe9e9;--hf-status-geblokkeerd-border: #f2cccc;--hf-status-geblokkeerd-text: #c0392f;
  --hf-status-verlopen-bg: #f2edee;   --hf-status-verlopen-border: #ddcdd0; --hf-status-verlopen-text: #8a6169;
  --hf-status-info-bg: #e8f0fc;       --hf-status-info-border: #c9dcf5;     --hf-status-info-text: #2a6fdb;
  --hf-status-escalatie-bg: #fbe8f2;  --hf-status-escalatie-border: #f3cbe0;--hf-status-escalatie-text: #b0347a;
  --hf-status-neutraal-bg: #eef1f4;   --hf-status-neutraal-border: #dbe1e8; --hf-status-neutraal-text: #5b6773; /* solid border */

  /* ---------- DIMENSION 5 · Taxonomy / Type (object classification — NOT status, NOT mutation) ---------- */
  /* Vast — navy-oriented, own alias (never reuse raw navy vars in components) */
  --color-hf-type-vast-text: #1f3a5f;  --color-hf-type-vast-bg: #eef2f7;  --color-hf-type-vast-line: #dfeaf6;
  /* Inval — a TYPE, not a warning. Physical value currently shared with status-aandacht; token is distinct. */
  --color-hf-type-inval-text: #b56a1e; --color-hf-type-inval-bg: #fbf0e2; --color-hf-type-inval-line: #f0dcc0;
  /* Retentie (type) — canonical cross-context identity, aliased to the Dimension 4 (Mutation/Event) value.
     Same physical colour as --color-hf-retentie by design (§7 businessregel): mutation, plaatsingstype and
     opdrachttype Retentie must always render identically. Never redefine this independently. */
  --color-hf-type-retentie-text: var(--color-hf-retentie);
  --color-hf-type-retentie-bg: var(--color-hf-retentie-bg);
  --color-hf-type-retentie-line: var(--color-hf-retentie-line);

  /* ---------- DIMENSION 5 · production compatibility extension (app.happyflex.nl, 2026-08-19) ----------
     Production carries more `opdrachttype` values than Vast/Inval/Retentie. They are Taxonomy/Type,
     not mutation events, and must keep their existing recognisable business colour. Each gets its own
     TYPE semantic family ALIASED to the existing physical value — never a new hue, never a second
     physical definition, never a status token. Additive only; nothing above changed. */
  --color-hf-type-lost-text: var(--color-hf-lost);
  --color-hf-type-lost-bg: var(--color-hf-lost-bg);
  --color-hf-type-lost-line: var(--color-hf-lost-line);
  --color-hf-type-extra-text: var(--color-hf-extra);
  --color-hf-type-extra-bg: var(--color-hf-extra-bg);
  --color-hf-type-extra-line: var(--color-hf-extra-line);
  --color-hf-type-update-text: var(--color-hf-update);
  --color-hf-type-update-bg: var(--color-hf-update-bg);
  --color-hf-type-update-line: var(--color-hf-update-line);
  --color-hf-type-ruil-text: var(--color-hf-ruil);
  --color-hf-type-ruil-bg: var(--color-hf-ruil-bg);
  --color-hf-type-ruil-line: var(--color-hf-ruil-line);
  --color-hf-type-nieuw-text: var(--color-hf-nieuw);
  --color-hf-type-nieuw-bg: var(--color-hf-nieuw-bg);
  --color-hf-type-nieuw-line: var(--color-hf-nieuw-line);
  /* Studiedag keeps its existing warm taupe (Afwezig family) through its own type alias. */
  --color-hf-type-studiedag-text: var(--color-hf-afwezig);
  --color-hf-type-studiedag-bg: var(--color-hf-afwezig-bg);
  --color-hf-type-studiedag-line: var(--color-hf-afwezig-line);
  /* "Vervallen" is primarily a LIFECYCLE status; as an opdrachttype value it is a known domain
     inconsistency. No new canonical type is invented — safe pre-existing fallback = Lost family. */
  --color-hf-type-vervallen-text: var(--color-hf-lost);
  --color-hf-type-vervallen-bg: var(--color-hf-lost-bg);
  --color-hf-type-vervallen-line: var(--color-hf-lost-line);
  /* Regular / Vast-baseline in the opdrachttype axis — quiet neutral taxonomy treatment.
     Own physical value on purpose: aliasing to a Dimension 3 status token would blur dimensions. */
  --color-hf-type-regular-text: #5b6773;
  --color-hf-type-regular-bg: #eef1f4;
  --color-hf-type-regular-line: #dbe1e8;

  /* ---------- DIMENSION 5b · Document category (Taxonomy/Type sub-family, not a separate dimension —
     NOT status/mutation tokens) ---------- */
  --hf-doc-category-contract-text: #1f3a5f;      --hf-doc-category-contract-bg: #eef2f7;      --hf-doc-category-contract-line: #dfeaf6;
  /* Compliance shares its physical violet with mutation "Update" — semantic tokens stay separate on purpose. */
  --hf-doc-category-compliance-text: #7a4fc7;    --hf-doc-category-compliance-bg: #f1ecfa;    --hf-doc-category-compliance-line: #d8c8f0;
  --hf-doc-category-personal-text: #43885f;      --hf-doc-category-personal-bg: #eaf4ef;      --hf-doc-category-personal-line: #c6e2d3;
  --hf-doc-category-profile-text: #59636f;       --hf-doc-category-profile-bg: #eef1f4;       --hf-doc-category-profile-line: #dbe1e8;
  /* Qualification shares its physical warm-orange with type/mutation Retentie — semantic tokens stay separate. */
  --hf-doc-category-qualification-text: #cd863f; --hf-doc-category-qualification-bg: #f9f1e4; --hf-doc-category-qualification-line: #edd7b8;
  --hf-doc-category-business-text: #b56a1e;      --hf-doc-category-business-bg: #fbf0e2;      --hf-doc-category-business-line: #f0dcc0;
  --hf-doc-category-financial-text: #2a6fdb;     --hf-doc-category-financial-bg: #e8f0fc;     --hf-doc-category-financial-line: #c9dcf5;
  --hf-doc-category-organisation-text: #2b8a8a;  --hf-doc-category-organisation-bg: #e5f2f2;  --hf-doc-category-organisation-line: #c2e0e0;

  /* ---------- DIMENSION 6 · Origin / Herkomst — treatment-led, no dominant categorical hue ---------- */
  --hf-origin-opgesteld-bg: var(--color-hf-navy-50); --hf-origin-opgesteld-text: var(--color-hf-navy); --hf-origin-opgesteld-line: #dfeaf6;
  --hf-origin-aangeleverd-bg: transparent;           --hf-origin-aangeleverd-text: var(--color-hf-muted); --hf-origin-aangeleverd-line: var(--color-hf-line);
  --hf-origin-systeem-bg: var(--color-hf-line-2);    --hf-origin-systeem-text: var(--color-hf-muted);     --hf-origin-systeem-line: var(--color-hf-line);

  /* ---------- Chart / data-viz (low-saturation categorical) ---------- */
  --hf-chart-1: #1f3a5f; --hf-chart-2: #2b8a8a; --hf-chart-3: #3e6ed4; --hf-chart-4: #5f8f6f;
  --hf-chart-5: #cd863f; --hf-chart-6: #7a4fc7; --hf-chart-7: #a03352;
  /* Coral (#f0623a) is NOT in the standard chart series — only as a single highlight serie. */

  /* ---------- Third-party brand (WhatsApp) — kept apart, never spread loosely ---------- */
  --wa-green: #25d366; --wa-green-hover: #1ebe5a; --wa-header: #075e54; --wa-chat-bg: #ece5dd;

  /* ---------- Website alias-map (thin; values come from the tokens above) ---------- */
  --navy: var(--color-hf-navy);
  --navy-700: var(--color-hf-navy-700);
  --navy-50: var(--color-hf-navy-50);
  --navy-deep: var(--color-hf-navy-deep);
  --navy-100: #dfeaf6;
  --coral: var(--color-hf-orange);
  --coral-hover: var(--color-hf-orange-600);
  --coral-soft: var(--color-hf-orange-soft);
  --bg: var(--color-hf-bg);
  --panel: var(--color-hf-panel);
  --panel-2: var(--color-hf-panel-2);
  --line: var(--color-hf-line);
  --line-2: var(--color-hf-line-2);
  --ink: var(--color-hf-ink);
  --ink-soft: var(--color-hf-ink-soft);
  --muted: var(--color-hf-muted);
  --ok: var(--color-hf-ok);     --ok-bg: var(--color-hf-ok-bg);   --ok-bd: #bfe6d2;
  --warn: var(--color-hf-warn); --warn-bg: var(--color-hf-warn-bg); --warn-bd: #f0d6ad;
  --danger: var(--color-hf-danger); --danger-bg: var(--color-hf-danger-bg); --danger-bd: #f0c4c4;
  --info: var(--color-hf-info); --info-bg: var(--color-hf-info-bg); --info-bd: #c2d8f6;
}