/*
 * HERO DESIGN SYSTEM 1.0 · hero-tokens.css · skeleton of Monday 12 October 2026 (version in VERSIE)
 * Interface (Claude), design agent of Hero · ticket 5281; first version 0.1 of 9 October 2026 (ticket 4617)
 *
 * The single source of every value of the Hero platform: CSS custom properties only. No classes, no
 * fonts, no icons; the classes of the house style (hero-*) and of the platform layer (p-*) are in
 * componenten/componenten.css, which you load after this file. Do not load huisstijl/tokens.css next to it any more.
 *
 * Source of each value (nothing invented; the reference table is in tokens/BRON.md):
 *   house style = huisstijl/tokens.css of the regie (1 October 2026)
 *   platform    = huisstijl/platform.css (the layer of Hero 3.0: a calm look, headings in ink)
 *   new         = roles that the house style does not name yet; motivation in report 03 of Interface, 1.2
 * Where platform.css overrides a value of tokens.css, this file has the platform value, with the
 * house-style value in the comment: the platform layer is the most recent decision of the regie.
 * Deviations of 1.0 from the house style (answer 5a of the regie, ticket 5281): --p-inkt is
 * equal to --h-tekst (ticket 5036); the role --h-tekst-meta is 12 px; see tokens/BRON.md.
 *
 * Language: the comments are in English since 1.0.0 (code and comments in English, texts for people in Dutch);
 * the Dutch comments of 0.2 are in the git history.
 *
 * Layers and prefixes:
 *   --hero-*   brand and palette (fixed values)
 *   --h-*      role in the UI (a theme adjusts these)
 *   --t-*      default tone of a part that uses a tone
 *   --p-*      the platform layer of Hero 3.0 (ink, soft line)
 *
 * Not carried over, on purpose: the variants data-actie="oranje" (the main action stays blue) and
 * data-merk="logo-juli-2025" (the logo stays as it is); the logo colours are at the bottom, for comparison only.
 *
 * Usage: see LEESMIJ.md in the root of the repo. An app imports this file once, before its own styles.
 */

:root {
  color-scheme: light;

  /* =====================================================================
   * 1. BRAND AND PALETTE  (house style)
   * ===================================================================== */
  --hero-blue: #073889;            /* Hero Blue: the one primary button, where you are, a link */
  --hero-orange: #f46015;          /* Hero Orange: only a dot or a thin stripe */

  --hero-blue-black: #03153f;      /* body text */
  --hero-blue-bold: #0065cc;       /* hover on the primary button (house style); link in the house style, in the platform the link is Hero Blue */
  --hero-blue-medium: #4197cb;
  --hero-blue-light: #00a8f5;      /* hover border of a clickable card */
  --hero-blue-thin: #9ecae2;
  --hero-blue-soft: #d3e6f0;
  --hero-blue-hairline: #e9f3f8;

  --hero-orange-black: #4c1b00;
  --hero-orange-bold: #944100;     /* orange as text (7.0:1 on white); #f46015 as text reaches 3.2:1 */
  --hero-orange-medium: #c85800;
  --hero-orange-light: #f79c44;
  --hero-orange-thin: #fde1b6;     /* background of a warning label */

  --hero-grijs-black: #242629;     /* graphite: dark button, toast. Not as a text colour (see open point 1) */
  --hero-grijs-bold: #4f5259;      /* secondary text, 7.8:1 */
  --hero-grijs-tekst: #6b6d78;     /* muted text, 5.1:1 */
  --hero-grijs-regular: #9496a1;   /* dot, icon, disabled; as text only 2.9:1 */
  --hero-grijs-light: #b8c2c7;     /* strong border */
  --hero-grijs-thin: #dfe4e6;      /* border */
  --hero-grijs-hairline: #f5f5f9;  /* disabled field, hover in the menu */

  --hero-groen-black: #002b0d;
  --hero-groen-bold: #006621;      /* green text and the only green button colour with enough contrast (7.2:1) */
  --hero-groen-regular: #38bd47;   /* dot; as text only 2.5:1 */
  --hero-groen-light: #91d98c;
  --hero-groen-thin: #d7ead7;
  --hero-rood-bold: #8f101d;
  --hero-rood: #b71525;
  --hero-rood-thin: #f8dbde;
  --hero-geel: #ffbd0d;            /* attention; only as a dot or as a surface with text in --hero-orange-bold */
  --hero-paars-bold: #6d5bd0;      /* only for what an AI colleague did or proposes */
  --hero-paars-thin: #ede9fb;
  --hero-wit: #ffffff;

  /* Font and weights (house style: Exo 800 for headings and buttons, 400 for text) */
  --hero-font: 'Exo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hero-font-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', 'Ink Free', 'Noteworthy', 'Marker Felt', cursive; /* the empty state only */
  --hero-gewicht-tekst: 400;
  --hero-gewicht-medium: 500;      /* menu, chips, status labels */
  --hero-gewicht-label: 600;       /* tabs, small labels, card heading and day start (platform) */
  --hero-gewicht-kop: 800;         /* page title, large figures */
  --hero-gewicht-knop: 800;        /* buttons */

  /* Text sizes of the house style (the roles for 0.1 are in section 5) */
  --hero-tekst-meta: 11px;         /* house style; 0.1 never uses less than --h-tekst-min for text */
  --hero-tekst-xs: 12px;
  --hero-tekst-sm: 14px;
  --hero-tekst-md: 16px;
  --hero-tekst-lg: 18px;
  --hero-tekst-xl: 20px;
  --hero-tekst-2xl: 24px;
  --hero-tekst-3xl: 30px;

  /* Spacing (the value in the name is the number of pixels) */
  --hero-ruimte-4: 4px;
  --hero-ruimte-8: 8px;
  --hero-ruimte-12: 12px;
  --hero-ruimte-16: 16px;
  --hero-ruimte-20: 20px;
  --hero-ruimte-24: 24px;
  --hero-ruimte-32: 32px;
  --hero-ruimte-40: 40px;
  --hero-ruimte-48: 48px;
  --hero-ruimte-64: 64px;

  /* Radius */
  --hero-radius-s: 4px;            /* checkbox */
  --hero-radius-m: 6px;            /* button in a segment bar */
  --hero-radius: 8px;              /* button, field, menu item */
  --hero-radius-l: 12px;           /* card, table, alert, toast */
  --hero-radius-xl: 16px;          /* popup */
  --hero-radius-pil: 999px;        /* status label, counter, avatar, version pill */

  /* Shadow */
  --hero-schaduw-s: 0 1px 2px 0 rgba(0, 0, 0, 0.05);                                           /* card, field */
  --hero-schaduw-m: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);      /* selected segment */
  --hero-schaduw-l: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);  /* menu, select */
  --hero-schaduw-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10); /* drawer, toast */
  --hero-schaduw-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);                                 /* popup */

  /* Layout */
  --hero-kopbalk-hoogte: 56px;
  --hero-onderbalk-hoogte: 72px;   /* platform: the bottom bar on the phone (.p-onderbalk); a token since 0.5.0, for the shell */
  --hero-logo-hoogte: 34px;        /* house style and rule 1 of regels/vijf-regels.md (platform.css sets 38px); a token since 0.5.0 */
  --hero-formulier-kolom: 480px;   /* new: the column of a form (report 03 §2.4, spec 05); a token since 0.5.0 */
  --hero-zijmenu-breedte: 256px;
  --hero-pagina-padding: 20px;     /* phone: 12px, in the media query at the end of this file */
  --hero-knop-hoogte: 40px;
  --hero-knop-hoogte-klein: 32px;  /* filter bar */
  --hero-z-kopbalk: 30;
  --hero-z-menu: 40;
  --hero-z-laag: 50;

  /* =====================================================================
   * 2. ROLES IN THE UI  (house style, with the platform layer on top)
   * ===================================================================== */
  --h-canvas: #f5f6f8;                      /* platform; house style #f6f8fc */
  --h-vlak: #ffffff;                        /* card, side menu, popup */
  --h-vlak-2: var(--hero-grijs-hairline);   /* search field, disabled field, footer of a popup */
  --h-kopbalk-bg: rgba(255, 255, 255, 0.95);
  --h-rand: var(--hero-grijs-thin);
  --h-rand-sterk: var(--hero-grijs-light);
  --h-tekst: var(--hero-blue-black);        /* body text */
  --h-tekst-2: var(--hero-grijs-bold);      /* secondary text */
  --h-tekst-3: var(--hero-grijs-tekst);     /* muted: hint, time, meta text; the column header of a table is --h-tekst-2 (spec 4) */
  --h-tekst-placeholder: #8a8d99;           /* 3.3:1: a placeholder is never the label */
  --h-invoer-bg: #ffffff;
  --h-tabelkop: #f7f8fa;                    /* platform; house style rgba(223, 228, 230, 0.4) */
  --h-rij-hover: rgba(26, 43, 72, 0.035);   /* platform; house style rgba(211, 230, 240, 0.3) */
  --h-menu-hover: var(--hero-grijs-hairline);
  --h-menu-actief-bg: #eef1f6;              /* platform; house style var(--hero-blue-hairline) */
  --h-menu-actief-tekst: var(--hero-blue);  /* where you are */
  --h-segment-bg: var(--hero-grijs-thin);
  --h-actie: var(--hero-blue);              /* the one filled button */
  --h-actie-hover: #052c6c;                 /* platform; house style var(--hero-blue-bold) */
  --h-actie-tekst: #ffffff;                 /* 10.9:1 on Hero Blue */
  --h-link: var(--hero-blue);               /* platform; house style var(--hero-blue-bold) */
  --h-focus: var(--hero-blue);              /* focus ring */
  --h-focus-zacht: #d6deec;                 /* platform; house style var(--hero-blue-soft): ring around a field with focus */
  --h-laag: rgba(0, 0, 0, 0.40);            /* backdrop behind popup and drawer */
  --h-toast-bg: var(--hero-grijs-black);
  /* 1.0: the other roles of the toast (component 11), with the values that the house style writes as literals in
   * .hero-toast (huisstijl/tokens.css section 10); the same in the dark theme, on the lighter --h-toast-bg there */
  --h-toast-tekst: var(--hero-wit);         /* text, action and close button: 15.2:1 on graphite */
  --h-toast-goed: #86e6a0;                  /* icon of a toast that reports success */
  --h-toast-fout: #ff9a9c;                  /* icon of a toast that reports an error */
  --h-toast-info: #9ad9fb;                  /* icon of an info toast */
  /* 1.0.0: the surface of the action and the close button of the toast under the mouse: white text 7.8:1 on it, 1.9:1
   * against the toast. The dark theme has its own value: strong grey (sterk grijs) was almost the toast there (1.1:1) */
  --h-toast-hover: var(--hero-grijs-bold);

  /* Status colours, always with text. Per tone: bg (label), tekst (text), stip (dot), rand (border), licht (large surfaces) */
  --h-info-bg: #e7ecf5;                     /* platform; house style var(--hero-blue-soft) */
  --h-info-tekst: var(--hero-blue);
  --h-info-stip: var(--hero-blue);
  --h-info-rand: #cfd8e7;                   /* platform; house style var(--hero-blue-thin) */
  --h-info-licht: #f3f6fa;                  /* platform; house style var(--hero-blue-hairline) */
  --h-goed-bg: var(--hero-groen-thin);
  --h-goed-tekst: var(--hero-groen-bold);
  --h-goed-stip: var(--hero-groen-regular);
  --h-goed-rand: var(--hero-groen-light);
  --h-goed-licht: #ebf5eb;
  --h-waarschuwing-bg: var(--hero-orange-thin);
  --h-waarschuwing-tekst: var(--hero-orange-bold);
  --h-waarschuwing-stip: var(--hero-orange);
  --h-waarschuwing-rand: var(--hero-orange-light);
  --h-waarschuwing-licht: #fef3e2;
  --h-fout-bg: var(--hero-rood-thin);
  --h-fout-tekst: var(--hero-rood);
  --h-fout-stip: var(--hero-rood);
  --h-fout-rand: #e1969d;
  --h-fout-licht: #fceeef;
  --h-neutraal-bg: var(--hero-grijs-thin);
  --h-neutraal-tekst: var(--hero-grijs-bold);
  --h-neutraal-stip: var(--hero-grijs-regular);
  --h-neutraal-rand: var(--hero-grijs-light);
  --h-neutraal-licht: var(--hero-grijs-hairline);
  --h-ai-bg: var(--hero-paars-thin);        /* only an AI colleague */
  --h-ai-tekst: #6352c6;                    /* 1.0: 4.97:1 on paars thin; paars bold (#6d5bd0) reaches 4.35:1 at 12px (axe, components page) */
  --h-ai-stip: var(--hero-paars-bold);
  --h-ai-rand: #d9d2f7;
  --h-ai-licht: #f7f5fd;

  /* =====================================================================
   * 3. DEFAULT TONE  (platform: neutral instead of blue)
   * ===================================================================== */
  --t-bg: var(--h-neutraal-bg);             /* house style: var(--h-info-bg) */
  --t-tekst: var(--h-neutraal-tekst);
  --t-stip: var(--h-neutraal-stip);
  --t-rand: var(--h-neutraal-rand);
  --t-licht: var(--h-neutraal-licht);

  /* =====================================================================
   * 4. PLATFORM LAYER HERO 3.0  (platform)
   * ===================================================================== */
  --p-inkt: var(--h-tekst);  /* 1.0: equal to the text ink (ticket 5036); platform.css said #1a2b48 */
  --p-inkt-2: #46546c;                      /* second line under a heading */
  --p-lijn-zacht: #eceff3;                  /* divider inside a card */
  --p-spoor-ring: rgba(26, 43, 72, 0.12);          /* 1.0.0: the ring of 4px around the current point of the lane (p-spoor), the old platform ink with opacity (ticket 6752) */
  --p-spoor-ring-let-op: rgba(244, 96, 21, 0.14);  /* 1.0.0: the ring around a point that needs attention, orange with opacity (ticket 6752) */

  /* =====================================================================
   * 5. NEW IN 0.1  (roles that the house style does not name yet; motivation in the report, 1.2)
   * ===================================================================== */
  /* Focus: a ring of 2 px in Hero Blue with a gap of 1 px, like .hero-knop:focus-visible and ui.tsx Knop */
  --h-focus-breedte: 2px;
  --h-focus-afstand: 1px;
  --h-focus-ring: 0 0 0 var(--h-focus-afstand) var(--h-vlak), 0 0 0 calc(var(--h-focus-afstand) + var(--h-focus-breedte)) var(--h-focus);
  /* 1.0: the focus ring on a dark surface (the action and the close button of the toast), in the same form: 2 px of the
   * surface between the control and the ring, then a white ring of 2 px. The blue ring reaches 1.4:1 on graphite. */
  --h-focus-ring-donker: 0 0 0 2px var(--h-toast-bg), 0 0 0 calc(2px + var(--h-focus-breedte)) var(--hero-wit);
  /* Type scale of 0.1: six roles, minimum 12 px (the house style has 11 px for meta; see open point 3) */
  --h-tekst-min: 12px;
  --h-tekst-meta: 12px;      --h-regel-meta: 16px;      /* table header, hint, time, chip */
  --h-tekst-basis: 14px;     --h-regel-basis: 20px;     /* body text, button, field, list row */
  --h-tekst-lees: 16px;      --h-regel-lees: 24px;      /* reading text in a mail or document, the dashboard minimum */
  --h-tekst-kop: 20px;       --h-regel-kop: 28px;       /* page title */
  --h-tekst-groot: 24px;     --h-regel-groot: 32px;     /* large figure, day start on the phone */
  --h-tekst-dagstart: 30px;  --h-regel-dagstart: 38px;  /* the one sentence at the top (p-dagstart-zin) */
  /* Tap target and row height (design framework 8: 44 px on the phone, list rows 72 px) */
  --h-tikdoel: 44px;
  --h-lijstregel-min: 56px;
  --h-lijstregel-telefoon: 72px;
  /* Breakpoints, for documentation and scripts: a custom property does not work in a media query. The phone is one
   * boundary since 1.0.5: below 600 px is (max-width: 599px), from 600 px (min-width: 600px), in @media and @container */
  --h-breek-telefoon: 600px;   /* below it one column, page margin 12 px, popup as a bottom sheet */
  --h-breek-zijmenu: 900px;    /* below it the side menu behind the hamburger (house style) */
  --h-breek-tussen: 1180px;    /* below it three panes become two (design framework) */
  --h-breek-laptop: 1440px;    /* reference size of the prints */
  /* Other roles */
  --h-zijvlak: 360px;                       /* side column of a detail (hero-hoofd-zijkant) */
  --h-selectie-streep: var(--hero-blue);    /* selected row: a 3 px stripe on the left, separate from the focus */
  --h-skelet: var(--h-neutraal-bg);         /* loading surfaces; no spinner */
  --h-overgang: 0.15s;                      /* all transitions; zero with prefers-reduced-motion */
}

/* =====================================================================
 * 6. DARK THEME  (house style, derived from the shell; optional: inside the shell the apps themselves stay light)
 * ===================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --h-canvas: #26262a;
  --h-vlak: #313135;
  --h-vlak-2: #3f3f44;
  --h-kopbalk-bg: rgba(32, 32, 36, 0.92);
  --h-rand: rgba(255, 255, 255, 0.10);
  --h-rand-sterk: rgba(255, 255, 255, 0.20);
  --h-tekst: #f5f5f7;
  --h-tekst-2: #d1d1d6;
  --h-tekst-3: #98989d;
  --h-tekst-placeholder: #8e8e93;
  --h-invoer-bg: #3f3f44;
  --h-tabelkop: rgba(255, 255, 255, 0.05);
  --h-rij-hover: rgba(255, 255, 255, 0.05);
  --h-menu-hover: rgba(255, 255, 255, 0.06);
  --h-menu-actief-bg: rgba(244, 96, 21, 0.16);
  --h-menu-actief-tekst: #fb8b48;           /* 1.0.3: 4.51:1 on --h-menu-actief-bg over --h-vlak (axe; ticket 8284); house style #f88845, 4.36:1 */
  --h-segment-bg: rgba(255, 255, 255, 0.10);
  --h-actie: #0065cc;
  --h-actie-hover: #0d72d6;                 /* 1.0.3: 4.78:1 with white text (was #1a7fe0, 4.07:1; axe, ticket 8283); 1.18 lighter than --h-actie */
  --h-link: #5ac8fa;
  --h-focus: #5ac8fa;
  --h-focus-zacht: rgba(90, 200, 250, 0.30);
  --h-laag: rgba(0, 0, 0, 0.60);
  --h-toast-bg: #4c4c51;
  --h-toast-hover: #6e6e73;                 /* 1.0.0: lighter than the toast, 1.7:1 against it; white text 5.1:1 */
  --h-info-bg: rgba(90, 200, 250, 0.16);
  --h-info-tekst: #9ad9fb;
  --h-info-stip: #5ac8fa;
  --h-info-rand: rgba(90, 200, 250, 0.45);
  --h-info-licht: rgba(90, 200, 250, 0.10);
  --h-goed-bg: rgba(52, 199, 89, 0.16);
  --h-goed-tekst: #86e6a0;
  --h-goed-stip: #34c759;
  --h-goed-rand: rgba(52, 199, 89, 0.45);
  --h-goed-licht: rgba(52, 199, 89, 0.10);
  --h-waarschuwing-bg: rgba(255, 204, 51, 0.16);
  --h-waarschuwing-tekst: #ffd875;
  --h-waarschuwing-stip: #ffcc33;
  --h-waarschuwing-rand: rgba(255, 204, 51, 0.45);
  --h-waarschuwing-licht: rgba(255, 204, 51, 0.10);
  --h-fout-bg: rgba(255, 94, 98, 0.16);
  --h-fout-tekst: #ff9a9c;
  --h-fout-stip: #ff5e62;
  --h-fout-rand: rgba(255, 94, 98, 0.45);
  --h-fout-licht: rgba(255, 94, 98, 0.10);
  --h-neutraal-bg: rgba(255, 255, 255, 0.10);
  --h-neutraal-tekst: #d1d1d6;
  --h-neutraal-stip: #98989d;
  --h-neutraal-rand: rgba(255, 255, 255, 0.20);
  --h-neutraal-licht: rgba(255, 255, 255, 0.05);
  --h-ai-bg: rgba(167, 139, 250, 0.18);
  --h-ai-tekst: #c4b5fd;
  --h-ai-stip: #a78bfa;
  --h-ai-rand: rgba(167, 139, 250, 0.45);
  --h-ai-licht: rgba(167, 139, 250, 0.10);
  --hero-schaduw-s: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --p-inkt: #f5f5f7;
  --p-inkt-2: #d1d1d6;
  --p-lijn-zacht: rgba(255, 255, 255, 0.06);   /* 0.1: the same as --h-menu-hover in the dark theme; platform.css has no dark layer */
  --p-spoor-ring: rgba(245, 245, 247, 0.18);
  --p-spoor-ring-let-op: rgba(244, 96, 21, 0.30);
}

/* Motion: one rule for every app (house style, section 14) */
@media (prefers-reduced-motion: reduce) {
  :root { --h-overgang: 0s; }
}

/* Only for the house-style class hero-knop-oranje, so that every hero-* class keeps working; the check rejects an
 * orange button (rule 4: orange only as a dot or a stripe). Values from huisstijl/tokens.css. */
:root {
  --h-oranje-actie: var(--hero-orange);
  --h-oranje-actie-hover: var(--hero-orange-medium);
}

/* The page padding on a phone (was a media query in the app and in huisstijl/tokens.css), below --h-breek-telefoon:
 * (max-width: 599px), the one boundary of the phone since 1.0.5 (it was 600px here, so 600 px wide was a phone here and
 * a laptop in the additions). */
@media (max-width: 599px) {
  :root { --hero-pagina-padding: 12px; }
}

/* Reference only, so that every name of huisstijl/tokens.css exists here: the colours of the logo files of
 * July and June 2025. No class uses them and the logo stays as it is (rule 1); the house-style variant
 * data-merk="logo-juli-2025" that swaps the brand colours is not carried into 1.0. */
:root {
  --hero-logo-blauw: #00447b;
  --hero-logo-oranje: #ed7226;
  --hero-logo-amber: #f6bd51;
  --hero-logo-blauw-juni: #073889;
  --hero-logo-oranje-juni: #f46015;
  --hero-logo-amber-juni: #f5b863;
}