/* hakobu Design System tokens (docs/design/hakobu-design-v01/tokens/tokens.css, v01), as the app uses them:
   Day on :root, Night when theme.ts sets data-theme="dark" (screen only: printing stays Day). Without Hina Mincho and the
   serif type classes (David, 23.10.: not in the app); the app sets everything in the system sans. */
:root {
  --paper: #f1f0ec; /* Page background. Day is the site's --paper and theme-color; Night is a neutral near-black (no blue tint) for maximum contrast. */
  --paper-raised: #ffffff; /* Cards, inputs and anything that sits on paper (Night: a lifted neutral near-black). */
  --ink: #12253a; /* Body text, headings and the wordmark on paper and paper-raised (13.6:1 / 15.5:1 day, 18.3:1 / 16.1:1 night). */
  --ink-muted: #4a5b6c; /* Secondary text, captions, metadata on paper and paper-raised (6.1:1 / 7.0:1 day, 9.5:1 / 8.3:1 night). */
  --hairline: rgba(18, 37, 58, 0.14); /* Dividers and quiet borders. Decorative only; never the only boundary of a control. */
  --blue: #08759e; /* The brand blue. Day #08759e (4.6:1 on paper, 5.2:1 on white) is the site's #0a86b4 darkened within its hue so it also passes as text; Night keeps the original #0a86b4 (4.9:1 on paper). Marks, fills, accents; links still use blue-text. */
  --blue-text: #076a96; /* Links and accent text on paper and paper-raised (5.2:1 day, 12.0:1 / 10.6:1 night). Also the focus ring. */
  --enso-light: #0876a5; /* Start of the ensō gradient (top-left of the brush ring). Illustration only. */
  --enso-deep: #023062; /* End of the ensō gradient (bottom-right). Illustration and deep fills on day paper only; it disappears on night paper. */
  --band: rgba(6, 22, 30, 0.84); /* Glass over imagery (site footer, header over the scene), top of the band gradient. Day: deep teal-black at 84% for contrast on bright pages; Night: lighter graphite at 66% so the glass reads on near-black. */
  --band-deep: rgba(2, 9, 13, 0.92); /* Bottom of the band gradient (hk-band); darker so the band settles toward the edge. */
  --band-glow: #1a667c; /* Highlight in the band gradient top-left (60% strength, fading out by 65%). Day: a saturated teal; Night: soft steel blue. Glow only, never a fill behind text on its own. */
  --on-band: #e8eef3; /* Text on band (Day 7.0:1+ even over white, Night 5.1:1+; more over the Bucht scene). */
  --link-on-band: #cef1ff; /* Links on band (5:1+ even over pure white). Also the sky tint in illustrations. */
  --action: #2b5772; /* Primary button and selected-state fill: a muted teal (saturation ~45%), calmer than the brand blue. */
  --on-action: #ffffff; /* Text and icons on action and action-hover (6.1:1 / 8.1:1 day, 12.6:1 / 15.4:1 night). */
  --action-hover: #377597; /* Primary button fill on hover and press. */
  --danger: #b3261e; /* Error text and the border of an invalid field, on paper and paper-raised (5.7:1 / 6.5:1 day, 12.0:1 / 10.5:1 night). Always paired with an error message, never color alone. */
  /* Customer colours (Lieferung 5, shared/colors.ts): twelve instead of the design system's ten, which were too close to
     tell apart (worst pair ΔE 5). Stripes, dots, bars and icons only, never text: 3:1 or more on paper and paper-raised
     in Day and Night; worst pair ΔE 12.6 (OKLab ×100). Always next to the customer name. */
  --customer-rose: #aa5370;
  --customer-red: #9a0a20;
  --customer-orange: #de5e02;
  --customer-ochre: #8b5502;
  --customer-olive: #8a8732;
  --customer-green: #337343;
  --customer-teal: #049b84;
  --customer-petrol: #086593;
  --customer-sky: #4489c9;
  --customer-indigo: #583ca6;
  --customer-violet: #885cd2;
  --customer-plum: #831c73;
}
@media screen {
  :root[data-theme='dark'] {
    --paper: #050505;
    --paper-raised: #171717;
    --ink: #f1f3f5;
    --ink-muted: #a7b2bd;
    --hairline: rgba(241, 243, 245, 0.14);
    --blue: #0a86b4;
    --blue-text: #8fd0ec;
    --band: rgba(16, 20, 22, 0.66);
    --band-deep: rgba(6, 8, 9, 0.8);
    --band-glow: #2b5772;
    --action: #cddfea;
    --on-action: #050505;
    --action-hover: #d7f0ff;
    --danger: #ffb4a8;
    --customer-rose: #ca7690;
    --customer-red: #c33b40;
    --customer-orange: #ea691c;
    --customer-ochre: #8e5912;
    --customer-olive: #979446;
    --customer-green: #2e7240;
    --customer-teal: #109b84;
    --customer-petrol: #136e9e;
    --customer-sky: #5691c8;
    --customer-indigo: #6e54c2;
    --customer-violet: #9f74ec;
    --customer-plum: #aa4196;
  }
}
:root {
  --space-1: 4px; /* Icon-to-label gaps. */
  --space-2: 0.6em; /* Inline separators (the footer's ' · ' margin); scales with the text. */
  --space-3: 16px; /* Gaps inside components, paragraph spacing. */
  --space-4: 1.4rem; /* Vertical padding of bands and cards (the footer's 1.4rem). */
  --space-5: 2rem; /* Horizontal page gutter (the footer's 2rem). */
  --space-6: 48px; /* Between page sections. */
  --radius-0: 0; /* Default. Bands, images and sections run square and edge to edge. */
  --radius-sm: 4px; /* Buttons, inputs, small cards. */
  --radius-full: 9999px; /* Circles only: avatars, status dots, the ensō motif. */
  --blur-band: 16px; /* backdrop-filter radius behind band (with saturate(140%)): enough to turn imagery into soft colour fields. */
  --opacity-separator: 0.5; /* The ' · ' separator between inline items. */
  --opacity-stamp: 0.08; /* The ensō stamp (hk-stamp): ink at 8% so the mark reads as a grey tone, darker on Day paper, lighter on Night paper. Never behind body text. */
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}