/* tokens.css — THE design tokens of the portal, written once (B-28092026-one-tokens-sheet, closed 11-10-2026 with
   B-11102026-offer-register-bar-navy; Michael, 11-10-2026: "a" — the colour written once). Until then index.html's :root
   owned them and register.html and offer.html each carried a pinned copy (rule 9: a fact that exists twice is the defect).
   Linked absolutely — <link rel="stylesheet" href="/tokens.css"> — from index.html, register.html and offer.html, because
   /register and /offer/{token} are served from routes, not from the folder (Program.cs). The DEALER values sit here; the
   STAFF values are body.desk's override of the same tokens in index.html (they are the staff values, not the tokens).
   tests/register.test.js pins the three links and that no page keeps a :root of its own; tests/shop.test.js 10ad · 10af ·
   10ak and the design system page read the tokens from here. The block below is index.html's :root of 11-10-2026: every value verbatim, the comments that named a place in that file re-pointed. */
  :root {
    /* R1 of the redesign (27-09-2026, REDESIGN_PROPOSAL_REVIEW_2026-09-27.md T1 · T2, the proposal's design-system/tokens.css): the COOL
       neutrals, portal-wide — the warm greys #F5F5F3 · #ECECE8 · #FAFAF8 · #E7E6E1 · #CFCEC7 · #23221F · #6E6C66 · #A6A49D until 27-09-2026.
       --surface-warm keeps its name (read by ~40 rules) and is the cool image well now. --control is the proposal's control border, 3.71:1 on
       white (T2: an input, a button, the stepper, a select must be seen — #E7E6E1 was 1.25:1). --text-soft WAS 2.49:1 and carried the brand
       line, placeholders and captions; no text may sit under 4.5:1 (T2), so it is the muted grey now, by reference, not a second value. */
    --bg: #F6F8FA; --bg-deep: #ECF0F3; --surface: #FFFFFF; --surface-warm: #F8FAFB;
    --border: #DDE3E8; --border-strong: #C5CED5; --control: #78878F;
    --text: #243139; --text-muted: #626C73; --text-soft: var(--text-muted);
    /* shop re-skin S7, the flip (22 Sep 2026, SHOP_RESKIN_PLAN.md §3 row S7; DESIGN_BRIEF.md §5 row 1; DECISIONS.md
       D-21092026-navy-or-orange): the accent is navy, portal-wide, in this one commit. --accent-soft and --border-accent are
       sampled off the proposal (Portal p2, Shop p6); --accent-deep is proposed, the proposal draws no hover state. --on-accent stays white.
       Was #C46A52 / #FBEEE7 / #9A4D38 / #E6C3B6 (orange) from 5 Sep to 22 Sep 2026. */
    /* R1 (27-09-2026): --accent and --accent-deep stay navy (D-27092026-redesign-accent: keep #004965); --accent-soft is the proposal's
       pale action tint #EAF2F5 — every reader is a selected or pale fill (was #CCDAE0) */
    --accent: #004965; --accent-soft: #EAF2F5; --accent-deep: #00344A;
    --accent-wash: rgba(0, 73, 101, .05);   /* the accent's rgb at 5 % — the free-goods line; moves WITH the four above (S7 review P5) */
    /* R1 (27-09-2026): the proposal's status pairs — success #197447 / #EDF7F0 (5.28:1; the in-stock pill was #409F5F on #ECF8F0, 3.04:1),
       warning #7A6400 / #FFF8DC (5.40:1), error #B4233A / #FCEFF2 (5.79:1). The sage, honey-ink, rose-ink and danger names keep their readers */
    --sage: #197447; --sage-soft: #EDF7F0; --honey: #F9DA18; --honey-soft: #FFF8DC;
    --rose: #F19EB4; --rose-soft: var(--danger-soft); --danger: #B4233A; --danger-soft: #FCEFF2;
    /* status + on-colour inks — added 14 Sep 2026 by the storefront split, step 1. These values were already in the
       stylesheet as literals; they are unchanged, only named. Nothing here alters rendering. */
    --on-accent: #FFFFFF;
    --violet: #6A45B0; --violet-soft: #EEE9FA;
    --blue: #2B62A7; --blue-soft: #E6F0FB;
    --cyan: #3FB2DC; --cyan-soft: #E2F5FB; --ink-cyan: #1B7FA6;
    --ink-sage: var(--sage); --ink-honey: #7A6400; --ink-honey-deep: var(--ink-honey); --ink-amber: #B26A00;   /* R1: the success and warning inks (were #2E7D4F · #8a7a00 · #7a6a00) */
    --ink-danger: #B3261E; --danger-tint: #FBEAE8;
    /* two near-identical roses inherited from the old sheet (176,64,90 and 176,58,91). Kept apart so the split step rendered
       identically; since R1 (27-09-2026) --ink-rose is the error ink, and --ink-rose-alt (staff only) waits for the staff re-skin. */
    --ink-rose: var(--danger); --ink-rose-alt: #B03A5B;   /* R1: the out-of-stock and campaign ink is the error ink (was #b0405a) */
    /* S7 review S6: the mail desk's *brand* category (mail from a supplier brand) was drawn in the accent; navy would be a third blue beside order and marketplace
       (and cyan is the DEV pill now). The old orange stays as this one category's ink — a category colour, never a control. */
    --ink-mailbrand: #C46A52; --mailbrand-soft: #FBEEE7;
    --border-accent: #B7CAD1; --border-danger: #E7B9B3;
    --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px;
    --radius-card: 10px;   /* R1 (T8): a card's corner — the proposal's 10; --radius (12) stays the overlays' (menus, drawers, dialogs) */
    /* shop re-skin S0 (21 Sep 2026, SHOP_RESKIN_PLAN.md §3): the DESIGN_BRIEF §5 tokens that need no navy (--accent
       itself moved in S7, above). --line was used by .al-note / .al-rcpt and defined nowhere, so
       those two alert-settings inputs gain the border they were meant to have; nothing else renders differently. */
    --surface-side: #F9FAFB; --surface-head: #EBF2F5;
    --line: var(--border); --focus: 2px solid var(--accent);
    /* the shop's two popovers (Ansicht, Mehr): --text's rgb at 14 % — moves WITH --text, as --accent-wash moves with --accent. It was
       a color-mix of --text at 14 % into transparent, identical on screen; a browser computes that to the `color` function in srgb, which
       html2canvas 1.4.1 cannot parse — hidden or not, a popover in the page made every bug-report screenshot fail from 27-09 (29-09-2026,
       tests/bugreport.test.js §5b, which also fails on any such function written here again — rgb, rgba, hsl and hsla only) */
    --shadow-pop: 0 8px 24px rgba(36, 49, 57, .14);
    /* the type weights — lighter type in the shop (Michael, 26-09-2026: "please use the mock's little lighter font. throughout the shop / portal. if
       portal is first later it is ok to wait with portal font alignment"; SHOP_LIST_PAGE_PLAN.md §Status). Every font-weight in index.html's sheet reads one of
       these; the DEALER values sit here, the STAFF values on body.desk in index.html — each staff value is the number the rule carried before, so a staff page
       computes exactly what it did. Staff alignment later = set body.desk's values equal to these (BACKLOG B-26092026-staff-desk-lighter-type). */
    --fw-title: 600;    /* the page heading (.shop-title) */
    --fw-bold: 600;     /* section heads, the header's brand name, pane headings, the basket head, totals, strong links */
    --fw-mark: 700;     /* the campaign pill, the confirmation's kicker, the bug icon */
    --fw-caps: 700;     /* small-caps labels, pills, the discount pill */
    --fw-price: 700;    /* the price (R: 18 bold navy) */
    --fw-strong: 600;   /* labels, buttons */
    --fw-medium: 500;   /* the product name (R: 16 medium) */
    --fw-body: 400;     /* body */
    --fs-title: 28px;   /* the page heading's size — the proposal's page title 28/600 since R1 (26 until 27-09-2026); staff on body.desk */
    /* the type SIZES — R1 of the redesign (27-09-2026, REDESIGN_PROPOSAL_REVIEW_2026-09-27.md T3; Michael 27-09-2026: "the fonts of the re-design is
       also better than current"), the weights' pattern: the DEALER size here, the STAFF size on body.desk — each staff value the number the rule
       carried before, so a staff page computes what it did (the staff desk re-skin is its own slice, D-22092026-staff-shell-navy-desktop-first).
       Only rules a dealer sees whose size moves read one; the product card, the list row, the sheet's blocks and the basket keep their literals
       (D-27092026-redesign-card-type), except what sat under 12 px. Nothing under 12 px on a dealer page (T3). */
    --fs-body: 14px;    /* body text, buttons, inputs, the search, the checkout and account lines (13 before) */
    --fs-small: 12px;   /* secondary and status: the stock and order-status pills, the discount pill, the brand line, column heads, captions (11 before) */
    --fs-xs: 12px;      /* the campaign pill and badge, a tag, the stack pill on a phone (10 before) */
    --fs-xxs: 12px;     /* the list row's *Foto folgt*, the phone card's campaign pill (9 before) */
    --fs-label: 14px;   /* a field label: 14 in sentence case (11 in capitals before; the case is the dealer rule after label.f) */
    --fs-section: 18px; /* a section title: the checkout's and the account's sections, the pane's *Filter* and *Marken* (14 before) */
    --fs-crumb: 15px;   /* the crumb (Shop › …) — and the hidden word the bar's house is centred over (.tab-w, 28-09-2026); staff read 15 too */
    --fs-name: 15px;    /* the product's name — the card, the list row, the product sheet, the basket line (Michael, 28-09-2026: "15 px", D-28092026-shop-design-round Q1; 16 from 26-09 under D-27092026-redesign-card-type (a)); staff keep 16 on body.desk */
    --fw-brand: 400;    /* the brand line over a product's name: regular, 12 px, muted, normal case (700 caps before) */
    --fw-label: 500;    /* a field label (600 before) */
    /* the reporting parts (lib/report.js, L8 item 0121 PR1, 01-11-2026; REPORTING_DESIGN.md §10 — proposal 7's figures): the three sizes no
       other token carries — the KPI figure in a card (26), the figure in a tile (24), a report card's title (16), the small type (12). Every other size in the
       reporting parts reads --fs-body / --fs-crumb. Dealer and staff alike: a report is staff's, and a sales agent reads the same card. */
    --fs-rep-big: 26px; --fs-rep-tile: 24px; --fs-rep-head: 16px; --fs-rep-small: 12px;   /* --fs-rep-small: the pill, a note, a tile's label, a chip and the graph's axis — 12 for staff too (rule 7: nothing under 12 px; body.desk's --fs-small is 11) */
  }

/* bug #242 (Michael 29-10-2026: "for a blue product a blue circle should be top right"): the colours of the product colour dot on the
   pack screen's Artikel sheet — product colours, not the house's, so they live here as classes and nowhere else (pack.js PK_COLOUR maps the
   Stammdaten's Farbe onto these keys; a colour not on the list gets no dot) */
.pc-navy { background: #1f3f7a; } .pc-blue { background: #2f5d9e; } .pc-sky { background: #7fb5e6; } .pc-aqua { background: #3fb3b8; }
.pc-mint { background: #9fd8c0; } .pc-green { background: #4f8a4c; } .pc-forest { background: #2f5a3a; } .pc-sage { background: #a3b69a; }
.pc-olive { background: #7d7f3a; } .pc-red { background: #c0392b; } .pc-terracotta { background: #c0663e; } .pc-orange { background: #e67e22; }
.pc-yellow { background: #f1c40f; } .pc-honey { background: #e3a72f; } .pc-gold { background: #c9a227; } .pc-pink { background: #ec8fb0; }
.pc-rose { background: #e8a0b4; } .pc-lilac { background: #c8a2c8; } .pc-purple { background: #7d4e9e; } .pc-white { background: #ffffff; }
.pc-cream { background: #f5ecd7; } .pc-beige { background: #d9c4a0; } .pc-grey { background: #8c9399; } .pc-silver { background: #c0c4c8; }
.pc-graphite { background: #45494e; } .pc-black { background: #1d1d1d; } .pc-brown { background: #7a5232; } .pc-oak { background: #b98d58; }
.pc-walnut { background: #6b4a2f; } .pc-bronze { background: #a46a35; }