/* anpacken design tokens — the single source for every client (docs/suite/09_Designsystem.md).
   Values from the design of 15 September 2026 (docs/design/2026-09-15_Entwurf/tokens.css), except
   positive, negative and warning: in both modes about two percent lightness away from their tint,
   so a status sign on its tint and an error sentence hold 4.5:1 (09_Designsystem.md, §8); and
   --color-control-border, added for the outline of inputs at 3:1 (Tim, 15 September 2026).
   Web: copied to packages/ui/src/tokens.css and services/core/backend/app/static/tokens.css
   (make tokens); tools/checks/tokens.sh fails when a copy differs, tools/checks/contrast.mjs
   recomputes the contrast pairs in every mode and fails when the two dark blocks drift apart.
   Native clients read tokens.json. Light and dark are equals: both sets are written out in full.
   Dark: [data-theme="dark"] on <html> when the user chose it, otherwise the system decides through
   the media query at the end (theme.js sets the attribute before the first paint). */

:root {
  /* --- type: Public Sans (SIL Open Font License), self-hosted --- */
  --font-ui: "Public Sans", "Public Sans Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Public Sans", "Public Sans Variable", ui-sans-serif, system-ui, sans-serif; /* with font-variant-numeric: tabular-nums */

  --text-xs: 13px;   --lh-xs: 18px;
  --text-sm: 15px;   --lh-sm: 22px;
  --text-md: 17px;   --lh-md: 25px;
  --text-lg: 21px;   --lh-lg: 28px;
  --text-xl: 28px;   --lh-xl: 34px;
  --text-2xl: 38px;  --lh-2xl: 44px;
  --text-3xl: 52px;  --lh-3xl: 56px;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* --- spacing (4 px grid) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* --- radii --- */
  --radius-control: 10px;
  --radius-panel: 16px;
  --radius-tile: 22px;
  --radius-pill: 999px;

  /* --- touch targets --- */
  --hit-web: 44px;
  --hit-phone: 48px;

  /* --- motion --- */
  --motion-fast: 80ms;
  --motion-base: 120ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- ground, light --- */
  color-scheme: light;
  --color-bg: #f6f6f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #f0f1f3;
  --color-text: #14161a;
  --color-text-muted: #56585b;
  --color-text-faint: #787b7e;
  --color-border: #d1d5d8;
  --color-border-soft: #e5e8ec;
  --color-control-border: #787b7e; /* outline of an input: >= 3:1 against bg and surface (WCAG 1.4.11) */
  --color-overlay: rgba(20, 22, 26, 0.36);
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.08);
  --shadow-md: 0 2px 8px rgba(20, 22, 26, 0.10);
  --shadow-lg: 0 8px 28px rgba(20, 22, 26, 0.14);

  /* --- brand: one colour for light and dark (luminance 0.20 holds 3:1 against both grounds) --- */
  --brand: #9e50fd;
  --brand-on: #f6f6f7;
  --brand-tint: #f3ebff;
  --brand-ink: #7040b8;

  /* --- meaning, light (always with a word or a sign) --- */
  --color-action: #4b6dbc;         --color-action-on: #ffffff;
  --color-action-tint: #e6f0ff;    --color-action-ink: #34508f;
  --color-focus: #14161a;          --color-focus-halo: #ffffff;
  --color-positive: #207d3f;       --color-positive-tint: #e3f6e6;
  --color-negative: #ad4d49;       --color-negative-tint: #ffe9e6;
  --color-warning: #9c5e00;        --color-warning-tint: #feeddb;

  /* --- app colours, light ---
     -x        symbol on a quiet ground, fill for brand surfaces
     -x-on     glyph on the fill (>= 3:1 against -x)
     -x-edge   0.7 px outline of the symbol where the fill alone stays under 3:1 against the surface
     -x-tint   light surface (active navigation entry)
     -x-ink    label on the tint (>= 4.5:1 against -x-tint) */
  --app-home: #14161a;      --app-home-on: #f6f6f7; --app-home-edge: #14161a; --app-home-tint: #eceef1; --app-home-ink: #3e4145;
  --app-work: #fda958;      --app-work-on: #14161a; --app-work-edge: #bf7015; --app-work-tint: #ffecdd; --app-work-ink: #915100;
  --app-contacts: #fd89da;  --app-contacts-on: #14161a; --app-contacts-edge: #e01db5; --app-contacts-tint: #ffe9f7; --app-contacts-ink: #8f4478;
  --app-mail: #c559fc;      --app-mail-on: #14161a; --app-mail-edge: #c559fc; --app-mail-tint: #f7ebff; --app-mail-ink: #7a4d94;
  --app-notes: #efd51e;     --app-notes-on: #14161a; --app-notes-edge: #988715; --app-notes-tint: #f9f2c4; --app-notes-ink: #726400;
  --app-chat: #1dd0d8;      --app-chat-on: #14161a; --app-chat-edge: #1a989e; --app-chat-tint: #c4fcff; --app-chat-ink: #007276;
  --app-minutes: #397bfc;   --app-minutes-on: #14161a; --app-minutes-edge: #397bfc; --app-minutes-tint: #e8f1ff; --app-minutes-ink: #3c61a7;
  --app-sales: #fd8453;     --app-sales-on: #14161a; --app-sales-edge: #da5714; --app-sales-tint: #ffebe4; --app-sales-ink: #9a4825;
  --app-outreach: #fd5562;  --app-outreach-on: #14161a; --app-outreach-edge: #fd5562; --app-outreach-tint: #ffebea; --app-outreach-ink: #9c4246;
  --app-booking: #6f6cff;   --app-booking-on: #14161a; --app-booking-edge: #6f6cff; --app-booking-tint: #eeedff; --app-booking-ink: #4a47b8;
  --app-compass: #f5b301;   --app-compass-on: #14161a; --app-compass-edge: #a07400; --app-compass-tint: #fff3d1; --app-compass-ink: #7a5600;
  --app-lotse: #38bdf8;     --app-lotse-on: #14161a;   --app-lotse-edge: #0369a1;   --app-lotse-tint: #e0f2fe;   --app-lotse-ink: #075985;
  --app-postwache: #2dd4bf; --app-postwache-on: #14161a; --app-postwache-edge: #0f766e; --app-postwache-tint: #ccfbf1; --app-postwache-ink: #115e59;
  --app-projects: #b09cfd;  --app-projects-on: #14161a; --app-projects-edge: #8d63f9; --app-projects-tint: #f0eeff; --app-projects-ink: #6654a1;
  --app-finance: #23f0b9;   --app-finance-on: #14161a; --app-finance-edge: #1a9d78; --app-finance-tint: #cafee8; --app-finance-ink: #007558;
  --app-wiki: #5fd919;      --app-wiki-on: #14161a; --app-wiki-edge: #459e16; --app-wiki-tint: #ddfad3; --app-wiki-ink: #3e7329;
  --app-drive: #16a9e1;     --app-drive-on: #14161a; --app-drive-edge: #1992c2; --app-drive-tint: #e0f4ff; --app-drive-ink: #006c93;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #15171b;
  --color-surface: #1d2025;
  --color-surface-sunken: #101216;
  --color-text: #f2f4f7;
  --color-text-muted: #a1a5aa;
  --color-text-faint: #878b90;
  --color-border: #3b3f45;
  --color-border-soft: #2a2e34;
  --color-control-border: #878b90;
  --color-overlay: rgba(0, 0, 0, 0.56);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
  --brand: #9e50fd;
  --brand-on: #14161a;
  --brand-tint: #2b1b3f;
  --brand-ink: #c49bfd;
  --color-action: #5c7fd0;         --color-action-on: #14161a;
  --color-action-tint: #18233c;    --color-action-ink: #9fb6e8;
  --color-focus: #ffffff;          --color-focus-halo: #14161a;
  --color-positive: #3d9f59;       --color-positive-tint: #102b17;
  --color-negative: #cc6f69;       --color-negative-tint: #391917;
  --color-warning: #c17b09;        --color-warning-tint: #331f05;
  --app-home: #f2f4f7;      --app-home-on: #15171b; --app-home-edge: #f2f4f7; --app-home-tint: #262a30; --app-home-ink: #c3c7cc;
  --app-work: #fda958;      --app-work-on: #14161a; --app-work-edge: #fda958; --app-work-tint: #422000; --app-work-ink: #f2a359;
  --app-contacts: #fd89da;  --app-contacts-on: #14161a; --app-contacts-edge: #fd89da; --app-contacts-tint: #480f39; --app-contacts-ink: #ee95d1;
  --app-mail: #c559fc;      --app-mail-on: #14161a; --app-mail-edge: #c559fc; --app-mail-tint: #3a164d; --app-mail-ink: #d39ef3;
  --app-notes: #efd51e;     --app-notes-on: #14161a; --app-notes-edge: #efd51e; --app-notes-tint: #322a00; --app-notes-ink: #cbb94c;
  --app-chat: #1dd0d8;      --app-chat-on: #14161a; --app-chat-edge: #1dd0d8; --app-chat-tint: #003134; --app-chat-ink: #17d0d8;
  --app-minutes: #397bfc;   --app-minutes-on: #14161a; --app-minutes-edge: #397bfc; --app-minutes-tint: #0b265b; --app-minutes-ink: #90b7ff;
  --app-sales: #fd8453;     --app-sales-on: #14161a; --app-sales-edge: #fd8453; --app-sales-tint: #4d1500; --app-sales-ink: #fd9a73;
  --app-outreach: #fd5562;  --app-outreach-on: #14161a; --app-outreach-edge: #fd5562; --app-outreach-tint: #510b14; --app-outreach-ink: #ff9495;
  --app-booking: #6f6cff;   --app-booking-on: #14161a; --app-booking-edge: #6f6cff; --app-booking-tint: #1e1b4d; --app-booking-ink: #aeacff;
  --app-compass: #f5b301;   --app-compass-on: #14161a; --app-compass-edge: #f5b301; --app-compass-tint: #3a2a00; --app-compass-ink: #ffd36b;
  --app-lotse: #38bdf8;     --app-lotse-on: #14161a;   --app-lotse-edge: #38bdf8;   --app-lotse-tint: #0c2a3a;   --app-lotse-ink: #7dd3fc;
  --app-postwache: #2dd4bf; --app-postwache-on: #14161a; --app-postwache-edge: #2dd4bf; --app-postwache-tint: #0f2f2c; --app-postwache-ink: #5eead4;
  --app-projects: #b09cfd;  --app-projects-on: #14161a; --app-projects-edge: #b09cfd; --app-projects-tint: #2d1c56; --app-projects-ink: #b9a9ff;
  --app-finance: #23f0b9;   --app-finance-on: #14161a; --app-finance-edge: #23f0b9; --app-finance-tint: #003324; --app-finance-ink: #50d2a7;
  --app-wiki: #5fd919;      --app-wiki-on: #14161a; --app-wiki-edge: #5fd919; --app-wiki-tint: #0d3400; --app-wiki-ink: #8dcb78;
  --app-drive: #16a9e1;     --app-drive-on: #14161a; --app-drive-edge: #16a9e1; --app-drive-tint: #002f43; --app-drive-ink: #4fc5fc;
}

/* The same dark set a second time for whoever never chose a mode (most people, and every page
   without script). contrast.mjs fails when this block and [data-theme="dark"] say different things. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #15171b;
    --color-surface: #1d2025;
    --color-surface-sunken: #101216;
    --color-text: #f2f4f7;
    --color-text-muted: #a1a5aa;
    --color-text-faint: #878b90;
    --color-border: #3b3f45;
    --color-border-soft: #2a2e34;
    --color-control-border: #878b90;
    --color-overlay: rgba(0, 0, 0, 0.56);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
    --brand: #9e50fd;
    --brand-on: #14161a;
    --brand-tint: #2b1b3f;
    --brand-ink: #c49bfd;
    --color-action: #5c7fd0;         --color-action-on: #14161a;
    --color-action-tint: #18233c;    --color-action-ink: #9fb6e8;
    --color-focus: #ffffff;          --color-focus-halo: #14161a;
    --color-positive: #3d9f59;       --color-positive-tint: #102b17;
    --color-negative: #cc6f69;       --color-negative-tint: #391917;
    --color-warning: #c17b09;        --color-warning-tint: #331f05;
    --app-home: #f2f4f7;      --app-home-on: #15171b; --app-home-edge: #f2f4f7; --app-home-tint: #262a30; --app-home-ink: #c3c7cc;
    --app-work: #fda958;      --app-work-on: #14161a; --app-work-edge: #fda958; --app-work-tint: #422000; --app-work-ink: #f2a359;
    --app-contacts: #fd89da;  --app-contacts-on: #14161a; --app-contacts-edge: #fd89da; --app-contacts-tint: #480f39; --app-contacts-ink: #ee95d1;
    --app-mail: #c559fc;      --app-mail-on: #14161a; --app-mail-edge: #c559fc; --app-mail-tint: #3a164d; --app-mail-ink: #d39ef3;
    --app-notes: #efd51e;     --app-notes-on: #14161a; --app-notes-edge: #efd51e; --app-notes-tint: #322a00; --app-notes-ink: #cbb94c;
    --app-chat: #1dd0d8;      --app-chat-on: #14161a; --app-chat-edge: #1dd0d8; --app-chat-tint: #003134; --app-chat-ink: #17d0d8;
    --app-minutes: #397bfc;   --app-minutes-on: #14161a; --app-minutes-edge: #397bfc; --app-minutes-tint: #0b265b; --app-minutes-ink: #90b7ff;
    --app-sales: #fd8453;     --app-sales-on: #14161a; --app-sales-edge: #fd8453; --app-sales-tint: #4d1500; --app-sales-ink: #fd9a73;
    --app-outreach: #fd5562;  --app-outreach-on: #14161a; --app-outreach-edge: #fd5562; --app-outreach-tint: #510b14; --app-outreach-ink: #ff9495;
    --app-booking: #6f6cff;   --app-booking-on: #14161a; --app-booking-edge: #6f6cff; --app-booking-tint: #1e1b4d; --app-booking-ink: #aeacff;
    --app-compass: #f5b301;   --app-compass-on: #14161a; --app-compass-edge: #f5b301; --app-compass-tint: #3a2a00; --app-compass-ink: #ffd36b;
    --app-lotse: #38bdf8;     --app-lotse-on: #14161a;   --app-lotse-edge: #38bdf8;   --app-lotse-tint: #0c2a3a;   --app-lotse-ink: #7dd3fc;
    --app-postwache: #2dd4bf; --app-postwache-on: #14161a; --app-postwache-edge: #2dd4bf; --app-postwache-tint: #0f2f2c; --app-postwache-ink: #5eead4;
    --app-projects: #b09cfd;  --app-projects-on: #14161a; --app-projects-edge: #b09cfd; --app-projects-tint: #2d1c56; --app-projects-ink: #b9a9ff;
    --app-finance: #23f0b9;   --app-finance-on: #14161a; --app-finance-edge: #23f0b9; --app-finance-tint: #003324; --app-finance-ink: #50d2a7;
    --app-wiki: #5fd919;      --app-wiki-on: #14161a; --app-wiki-edge: #5fd919; --app-wiki-tint: #0d3400; --app-wiki-ink: #8dcb78;
    --app-drive: #16a9e1;     --app-drive-on: #14161a; --app-drive-edge: #16a9e1; --app-drive-tint: #002f43; --app-drive-ink: #4fc5fc;
  }
}

/* numbers stand in columns */
.num { font-variant-numeric: tabular-nums; }

/* focus is always visible: a dark ring with a light halo (the other way round in dark mode) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-focus-halo);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}