/* tokens.css — /ui/v1 · the one token set of every trinsik app; the only file that defines colours (tools/ui_lint.py).
   Portal, HR, IT, Projekte and Reporting build on it (base.css, shell.css, components.css), the Brain maps its Tailwind
   colours onto it (static/css/trinsik.css: --tk-* = the -rgb triplets), Feedback gets a checked copy
   (feedback/src/styles/ui-v1/, tools/ui_export.py --check). Only custom properties: no selectors that style anything,
   no url() (the fonts are in fonts.css). Reference: _docs/designsystem/ (Claude Design "trinsik Plattform UI").

   Rules: paper instead of boxes, hairlines, sharp corners, no shadow, Senf once per surface, GT Alpina for titles and
   big numbers, Suisse Intl for everything else, Mono for numbers in tables. Light by default; dark follows the device
   unless the person chose light (data-theme is set before the first paint, partials/_theme_boot.html).

   Contract /ui/v1: names never change inside v1, values may (approved by Marcel, plan E8); new names are additive.
   v1 changelog
     07.10.2026  colours, type, spacing, radius (UI review C1; was static/css/tokens.css)
     08.10.2026  moved to /ui/v1 (stage DS1); fonts → fonts.css; added breakpoints, z-index, focus, motion, scrims,
                 chart colours (--chart-*) and planning colours (--plan-*, for <trinsik-plan>)
     08.10.2026  chart palette (zur Freigabe): --chart-3/-4 light values, dark values for --chart-3/-4/-5
     08.10.2026  planning grid redesign (Marcel): --plan-slot, --plan-inset, --plan-gap, --plan-who added; --plan-absence
                 now --mark (hatching), --plan-weekend --line, --plan-holiday = --plan-weekend (nothing built uses them yet)
     08.10.2026  design panel: added (same values as the code already used) --fs-lead, --fs-display, --fs-kpi-sm,
                 --page-x, --page-max, --side-w, --bar-h, --target
     08.10.2026  project colours --cat-1…12 and --cat-N-ink (palette A "Erde und Tinte", approved by Marcel): planning
                 grid and its legend only
     10.10.2026  UX v2: --fs-stat (a figure in a stats card k-stat)
     11.10.2026  density (Marcel: „wir verschwenden brutal viel Platz“): compact type, spacing, --page-x, --target;
                 added --fs-input, --lh, --row-y — taken back the same day, see below
     11.10.2026b Welle 0 redesign ("tighter is not better"): density back up — body 15 / 1.5, tables 14, hints 13,
                 labels 12, caps 11, --row-y 12 (row ~44 px), --page-x 40, page title 36, KPI figure 30, spacing scale
                 4 8 12 16 24 32 48 64 at every width; new colours --bill, --adj (exceptions "Funktion vor Design");
                 _docs/designsystem/guidelines.md §13/§15
     12.10.2026  Bausteine v2 (W8-0, _docs/designsystem/BAUSTEINE_V2.md): colour carries meaning — --good (= --bill, „in
                 Ordnung / kann abgerechnet werden“) next to --alert („jemand muss etwas tun“), everything else ink/grey;
                 --fs-head 40 (title of k.pagehead, 30 on phones), --fs-head-kpi 26 (its figures, 22 on phones)
     15.10.2026  mobile pass: --fs-caps 12 on phones (column heads, KPI labels, eyebrows were 11 px at 375 px)
     15.10.2026  visual QA: --fs-caps 12 at every width — 12 px is the smallest text of the kit (11 px labels on desktop) */

:root {
  /* colours (light): Air ground, Soft Black ink; every colour also as an "r g b" triplet for Tailwind (rgb(var(--x-rgb) / a)) */
  --bg: #F8F8F6;          --bg-rgb: 248 248 246;        /* the page */
  --surface: #FFFFFF;     --surface-rgb: 255 255 255;   /* sheet, popover, editor grid */
  --side: #F8F8F6;        --side-rgb: 248 248 246;      /* side bar */
  --ink: #262623;         --ink-rgb: 38 38 35;          /* text, the rule under section heads */
  --muted: #5F6062;       --muted-rgb: 95 96 98;        /* second text, labels */
  --line: #E8E8E3;        --line-rgb: 232 232 227;      /* hairline */
  --line-strong: #BEBDAE; --line-strong-rgb: 190 189 174; /* chips, line buttons, field frames */
  --mark: #8A897C;        --mark-rgb: 138 137 124;      /* status squares, chip borders */
  --accent: #DDCE00;      --accent-rgb: 221 206 0;      /* Senf: the one action that starts something */
  --accent-hover: #C9BB00; --accent-ink: #262623;      /* hover of the Senf fill, text on it (same in dark) */
  --accent-ink-rgb: 38 38 35;
  --ok: #646143;          --ok-rgb: 100 97 67;          /* done, saved */
  --alert: #A85A16;       --alert-rgb: 168 90 22;       /* action needed, error */
  --alert-ink: #8A4A12;   --alert-ink-rgb: 138 74 18;   /* alert as small text */
  /* function over design (Marcel: „Funktion vor Design“), the ONLY colours beyond the one accent next to the status
     colours: --bill green = billable hours / amounts, --adj purple = hours adjusted (billing correction). Always with
     a word or icon, never colour alone. Contrast: --bill 5.00:1 on --bg, 5.32:1 on --surface; --adj 5.97:1 / 6.35:1 */
  --bill: #1F7A4D;        --bill-rgb: 31 122 77;
  --adj: #6B4FA8;         --adj-rgb: 107 79 168;
  /* colour carries meaning (Bausteine v2, 12.10.2026): two semantic colours plus neutral ink/grey. --good = the same
     green as --bill (Faktura, Abrechnung): „in Ordnung / Geld kann abgerechnet werden“; „jemand muss etwas tun“ is
     --alert / --alert-ink. The meaning is said by a title tooltip on the element, never by a legend on the page. */
  --good: var(--bill);    --good-rgb: var(--bill-rgb);
  --scrim: rgba(38, 38, 35, .14);                       /* behind sheets and dialogs */
  --scrim-strong: rgba(38, 38, 35, .45);                /* behind the phone navigation (same in both themes) */
  --mask-solid: #000;                                   /* the opaque stop of a mask-image (only alpha counts) */
  --hover: var(--line);
  --line2: var(--line-strong);                          /* the old name (report.js, sheet.js, older pages) */

  /* chart colours (Chart.js and SVG; _docs/designsystem/guidelines.md "Diagramme"): series 1 is the ink, the others
     follow in this order; Senf (--chart-hi) only for the one highlighted series. Axes/grid in --line, labels --muted. */
  --chart-1: var(--ink);
  --chart-2: #CD701F;     --chart-3: #5F5D3A;     --chart-4: #4F7F96;     --chart-5: #A35C3A;     --chart-6: #7E8C5A;
  /* design panel 08.10.2026 (zur Freigabe): every series ≥ 3:1 on bg and surface in both themes, 3 and 6 apart in
     lightness (ΔE 20, was 7.5); dark overrides for 3, 4, 5. Never 5 and 6 side by side without labels (red-green). */
  --chart-hi: var(--accent);
  --chart-axis: var(--muted);
  --chart-grid: var(--line);

  /* planning grid <trinsik-plan> (Staffing; _docs/designsystem/trinsik-plan.md) and absence calendar k-cal: one box per
     day — every state has the same height, inset and baseline (--plan-row − 2 × --plan-inset), states differ by fill,
     an inset outline that never changes the size, and a word; never by height (Marcel, design panel 08.10.2026) */
  --plan-booked: var(--ink);                 /* fest: filled box, text --plan-booked-ink (project colours --cat-*: open, muted, spec) */
  --plan-booked-ink: var(--bg);
  --plan-tentative: var(--mark);             /* vorläufig: same box, light fill + 1 px dashed outline inside (outline-offset) + the word */
  --plan-tentative-fill: rgb(var(--ink-rgb) / .06); /* … the light fill */
  --plan-conflict: var(--alert);             /* überbucht: only a 2 px edge under the overbooked days + the hours ("−4 h"), never a fill */
  --plan-absence: var(--mark);               /* Abwesenheit: hatching in this colour on the free box + the word ("abwesend", never the reason) */
  --plan-slot: var(--surface);               /* frei: the empty day box (with a --line outline inside) */
  --plan-weekend: var(--line);               /* Wochenende, Feiertag, freier Tag: one muted filled box, no outline */
  --plan-holiday: var(--plan-weekend);       /* … the same box; the column head says "Feiertag" */
  --plan-today: var(--accent);               /* heute: a 2 px bar under the column head across the whole column width + the head in ink */
  --plan-free: var(--ok);                    /* balance: free hours */
  --plan-full: var(--muted);                 /* balance: 0 h */
  --plan-load-1: rgb(var(--ink-rgb) / .08);  /* load heat map: < 50 % (only in the balance row, always with the number) */
  --plan-load-2: rgb(var(--ink-rgb) / .18);  /* 50–80 % */
  --plan-load-3: rgb(var(--ink-rgb) / .32);  /* 80–100 % */
  --plan-load-over: rgb(var(--alert-rgb) / .35); /* > 100 %, always with the number */
  --plan-row: 40px;                          /* row height (person / project) */
  --plan-inset: var(--s1);                   /* space above and below the day box: box height = row − 2 × inset (32 px) */
  --plan-gap: 2px;                           /* even gutter between two day columns (a bar over several days covers it) */
  --plan-who: 240px;                         /* the sticky name column (112 px on phones) */
  --plan-day: 28px;                          /* one day column at zoom "Monat" and in the absence calendar */

  /* project colours (Marcel 08.10.2026: "funktion vor design" — distinct colours so you see at a glance which project
     is planned where): ONLY in the planning grid and its legend; one-accent rule everywhere else. Palette A "Erde und
     Tinte" (Marcel 08.10.2026), reordered so neighbours stay apart also with deuteranopia/protanopia (ΔE ≥ 18); light
     values nudged in lightness only where a rule needed it, dark values the same hues lighter; ≥ 3:1 on --surface and
     --bg, label --cat-N-ink (ink or paper) ≥ 4.5:1; away from Senf and --ok (ΔE ≥ 15) and --alert (ΔE ≥ 8). Assignment: ui_kit.cats() (stable per project, distinct within a view).
     Checked by tools/project_colours.py (test_ui_package). */
  --cat-1: #BE5035; --cat-1-ink: #F8F8F6;  --cat-2: #3F6E9A; --cat-2-ink: #F8F8F6;  --cat-3: #9B3D4E; --cat-3-ink: #F8F8F6;
  --cat-4: #424C96; --cat-4-ink: #F8F8F6;  --cat-5: #2F7A5C; --cat-5-ink: #F8F8F6;  --cat-6: #6E6A8F; --cat-6-ink: #F8F8F6;
  --cat-7: #739745; --cat-7-ink: #262623;  --cat-8: #8E4F7A; --cat-8-ink: #F8F8F6;  --cat-9: #C67B3E; --cat-9-ink: #262623;
  --cat-10: #557688; --cat-10-ink: #F8F8F6;  --cat-11: #B48254; --cat-11-ink: #262623;  --cat-12: #1D7F79; --cat-12-ink: #F8F8F6;



  /* type */
  --sans: 'Suisse Intl', 'Helvetica Neue', system-ui, sans-serif;
  --serif: 'GT Alpina', Georgia, serif;
  --mono: 'Suisse Intl Mono', ui-monospace, monospace;
  --wordmark: 'Adieu', 'Space Grotesk', sans-serif;
  /* density (Marcel 11.10.2026, „alles ist so groß, man muss ganz viel scrollen“; reference Moco, Linear, Notion):
     compact type at every width — body 14 / 1.4, tables 13, labels 12, the page title 24 instead of display size */
  --fs-title: 36px;                      /* page title, GT Alpina 300 / 1.2 (28 on phones) */
  --fs-kpi: 30px;                        /* key figure, GT Alpina 300 / 1 (24 on phones) */
  --fs-block: 15px;                      /* block / panel title, 500 — was 17 */
  --fs-text: 15px;                       /* running text / 1.5 (body) */
  --fs-table: 14px;                      /* tables / 1.4, numbers Mono tabular; navigation, buttons */
  --fs-hint: 13px;                       /* hints, field labels, prop labels */
  --fs-label: 12px;                      /* section heads (caps +.12em), labels, badges */
  --fs-caps: 12px;                       /* column heads, KPI labels (caps +.08em); 12 = the kit's minimum (15.10.2026) */
  /* off the 8 steps, named so they are not written as px again (design panel V6; M4 decides whether they stay) */
  --fs-lead: 14px;                       /* the one sentence of a page head (k-sub), list titles (k-li-title) — was 16 */
  --fs-display: 32px;                    /* a single big number on its own (k-big) — was 48 */
  --fs-kpi-sm: 24px;                     /* key figure on phones — was 36 */
  --fs-stat: 22px;                       /* a figure in a stats card k-stat (UX v2, 10.10.2026; 20 on phones) — was 32 */
  --fs-head: 40px;                       /* title of the page head v2 (k.pagehead), GT Alpina 300 (30 on phones) */
  --fs-head-kpi: 26px;                   /* a figure of the page head v2, GT Alpina 300 (22 on phones) */
  --fs-input: 16px;                      /* text in fields below 1024 px: iOS zooms into anything smaller (base.css) */
  --lh: 1.5;                             /* line height of running text and tables (body 15 / 1.5) */

  /* spacing: --page-x desktop margin, between panels --s5, inside a card --s4/--s5. Density 11.10.2026: from 1024 px
     the scale is about 40 % tighter in its layout steps (4 6 8 12 16 20 28 40, was 4 8 12 16 24 32 48 64; a 2 px
     half step below 12 so gaps stay readable); below 1024 px (phone and tablet shell, touch) the small steps keep their
     old values — 16 px phone gutter (--s4) — and only the big ones shrink (4 8 12 16 20 24 32 40). */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* layout (design panel S7): the measures the shell and the page repeat */
  --page-x: 40px;     /* left/right margin of k-page on desktop (k-page.wide too; phone: 16) */
  --page-max: 1920px; /* max width of k-page: the whole width on desktop, capped on very wide screens — was 1192 */
  --side-w: 240px;    /* the side bar — was 256 */
  --bar-h: 64px;      /* phone top and bottom bar */
  --target: 32px;     /* height of a control and its target with a mouse: buttons, links, chips, tabs, fields (WCAG
                         2.5.8 ≥ 24); 44 px below 1024 px and on touch screens (block below) — was 44 everywhere */
  --row-y: var(--s3); /* vertical padding of a table cell (12 px): one line of 14 px text → a row of about 44 px */

  /* shape: sharp corners, pills only for states and filters; no shadows (paper) */
  --radius: 0; --radius-pill: 999px; --shadow: none;

  /* breakpoints (documentation only — custom properties do not work in @media; write the number):
     ≥1440 wide · ≥1024 desktop with side bar · ≥768 tablet (side bar folded behind „Mehr“) · <768 phone (editors
     read-only). In @media: max-width 1439 / 1023 / 767 (migration M4, _docs/designsystem/guidelines.md "Breakpoints"). */
  --bp-wide: 1440px; --bp-desktop: 1024px; --bp-tablet: 768px; --bp-phone: 375px;

  /* layers */
  --z-raised: 1;     /* sticky table heads and columns */
  --z-float: 5;      /* sticky save line, small popovers inside the page */
  --z-bar: 20;       /* phone top and bottom bar */
  --z-side: 30;      /* side bar, account menu, filter popovers */
  --z-drawer: 40;    /* the side bar opened on a phone */
  --z-menu: 50;      /* the account menu on a phone */
  --z-sheet: 60;     /* sheets (k-sheet) */
  --z-popover: 70;   /* lists that open above a sheet (k-combo) */
  --z-skip: 100;     /* the skip link */

  /* focus: always visible, 2 px ink, 2 px away */
  --focus-width: 2px; --focus-offset: 2px;

  /* motion: short, no bounce; nothing moves for people who chose reduced motion */
  --dur-fast: .15s; --dur: .2s; --ease: ease-out;

  color-scheme: light;
}
/* touch and the phone/tablet shell (below 1024 px): 44 px targets, 16 px phone gutter, the small spacing steps as
   before (density 11.10.2026); a coarse pointer above 1024 px (a tablet in landscape) keeps the 44 px targets too */
@media (max-width: 1023px) { :root {
  --target: 44px; --fs-title: 28px; } }
@media (max-width: 767px) { :root { --fs-head: 30px; --fs-head-kpi: 22px; } }
@media (pointer: coarse) { :root { --target: 44px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --cat-1: #DD6A4D; --cat-1-ink: #262623;  --cat-2: #6390BE; --cat-2-ink: #262623;  --cat-3: #D26E7C; --cat-3-ink: #262623;
  --cat-4: #8185D5; --cat-4-ink: #262623;  --cat-5: #509A7A; --cat-5-ink: #262623;  --cat-6: #8C88AE; --cat-6-ink: #262623;
  --cat-7: #A1C671; --cat-7-ink: #262623;  --cat-8: #B977A3; --cat-8-ink: #262623;  --cat-9: #C67B3E; --cat-9-ink: #262623;
  --cat-10: #6F91A3; --cat-10-ink: #262623;  --cat-11: #B48254; --cat-11-ink: #262623;  --cat-12: #3E9A92; --cat-12-ink: #262623;
  --bg: #262623; --bg-rgb: 38 38 35; --surface: #2E2E2A; --surface-rgb: 46 46 42; --side: #1F1F1D; --side-rgb: 31 31 29;
  --ink: #F8F8F6; --ink-rgb: 248 248 246; --muted: #BEBDAE; --muted-rgb: 190 189 174; --line: #3E3E39; --line-rgb: 62 62 57;
  --line-strong: #464641; --line-strong-rgb: 70 70 65; --mark: #7A796E; --mark-rgb: 122 121 110;
  --ok: #9C9860; --ok-rgb: 156 152 96; --alert: #E6964F; --alert-rgb: 230 150 79; --alert-ink: #E6964F; --alert-ink-rgb: 230 150 79;
  --chart-3: #B5B385; --chart-4: #6D9AB0; --chart-5: #C9805C;
  --bill: #5FBF8A; --bill-rgb: 95 191 138; --adj: #B39DE0; --adj-rgb: 179 157 224; /* 6.72:1 / 6.04:1 and 6.37:1 / 5.72:1 on --bg / --surface */
  --scrim: rgba(0, 0, 0, .45); color-scheme: dark; } }
:root[data-theme="dark"] {
  --cat-1: #DD6A4D; --cat-1-ink: #262623;  --cat-2: #6390BE; --cat-2-ink: #262623;  --cat-3: #D26E7C; --cat-3-ink: #262623;
  --cat-4: #8185D5; --cat-4-ink: #262623;  --cat-5: #509A7A; --cat-5-ink: #262623;  --cat-6: #8C88AE; --cat-6-ink: #262623;
  --cat-7: #A1C671; --cat-7-ink: #262623;  --cat-8: #B977A3; --cat-8-ink: #262623;  --cat-9: #C67B3E; --cat-9-ink: #262623;
  --cat-10: #6F91A3; --cat-10-ink: #262623;  --cat-11: #B48254; --cat-11-ink: #262623;  --cat-12: #3E9A92; --cat-12-ink: #262623;
  --bg: #262623; --bg-rgb: 38 38 35; --surface: #2E2E2A; --surface-rgb: 46 46 42; --side: #1F1F1D; --side-rgb: 31 31 29;
  --ink: #F8F8F6; --ink-rgb: 248 248 246; --muted: #BEBDAE; --muted-rgb: 190 189 174; --line: #3E3E39; --line-rgb: 62 62 57;
  --line-strong: #464641; --line-strong-rgb: 70 70 65; --mark: #7A796E; --mark-rgb: 122 121 110;
  --ok: #9C9860; --ok-rgb: 156 152 96; --alert: #E6964F; --alert-rgb: 230 150 79; --alert-ink: #E6964F; --alert-ink-rgb: 230 150 79;
  --chart-3: #B5B385; --chart-4: #6D9AB0; --chart-5: #C9805C;
  --bill: #5FBF8A; --bill-rgb: 95 191 138; --adj: #B39DE0; --adj-rgb: 179 157 224; /* 6.72:1 / 6.04:1 and 6.37:1 / 5.72:1 on --bg / --surface */
  --scrim: rgba(0, 0, 0, .45); color-scheme: dark; }