/* ui · shape: Long Document · theme: Werkbank (custom) · nav: N4 · footer: F2 · tone: plain
   ===========================================================================
   SHARED DESIGN TOKENS · Digi Works
   ---------------------------------------------------------------------------
   Dieser Block ist die gemeinsame Grundlage von digi-works.org und
   handwerk.digi-works.org. Weil beide auf getrennten Domains und in getrennten
   Repositories liegen, existiert er zweimal:

     · digi-works-website/css/tokens.css   (diese Datei)
     · handwerk/Handwerk.html              (inline, oberster <style>-Block)

   Änderungen immer in beiden Dateien nachziehen.

   Farben stammen aus dem Digi Works-Logo (Navy-Wortmarke, Signet in Gold) und
   sind in OKLCH notiert. Schriften werden lokal ausgeliefert, keine externen
   Dienste, siehe VOR-VEROEFFENTLICHUNG.md.
   =========================================================================== */

/* --- Schriften (lokal, identisch mit handwerk/fonts/) --------------------- */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/dm-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Helles Skin: digi-works.org ----------------------------------------- */

:root {
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-paper: oklch(97% 0.007 89);
  --color-paper-2: oklch(93.5% 0.014 87);
  --color-paper-raised: oklch(99.2% 0.004 89);
  --color-ink: oklch(26.3% 0.072 258);
  --color-ink-2: oklch(44% 0.03 250);
  --color-ink-3: oklch(55% 0.024 246);
  --color-accent: oklch(49% 0.099 82);
  --color-accent-bright: oklch(67.3% 0.138 77);
  --color-accent-wash: oklch(95.5% 0.03 88);
  --color-rule: oklch(90.8% 0.017 85);
  --color-rule-strong: oklch(85% 0.023 85);
  --color-focus: oklch(42.4% 0.122 257);
  --color-ok: oklch(52% 0.12 155);
  --color-bad: oklch(52.5% 0.196 29);

  /* Invertiertes Band, in beiden Skins identisch. */
  --color-invert-paper: oklch(20.8% 0.05 256);
  --color-invert-paper-2: oklch(26.3% 0.072 258);
  --color-invert-ink: oklch(97% 0.007 89);
  --color-invert-ink-2: oklch(84.8% 0.025 248);
  --color-invert-rule: oklch(38% 0.055 252);
  --color-invert-accent: oklch(75% 0.128 82);

  /* Statusfarben (Auftragszustände in der Handwerk-Vorschau). */
  --color-status-open: oklch(75% 0.15 70);
  --color-status-active: oklch(62% 0.17 255);
  --color-status-done: oklch(69.6% 0.149 162);
  --color-status-late: oklch(62% 0.19 27);

  /* 4pt-Raster. */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 144px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-display-s: 4rem;
  --text-display: 6rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --rule-hair: 1px;
  --rule-thick: 2px;

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Satzbreiten, von weit nach eng. Überschriften und Auszeichnungen brauchen
     eine deutlich engere Zeile als Fließtext, sonst zerfällt die Form. Sie
     stehen hier als Token, damit die Werte an einer Stelle liegen und nicht
     verstreut im Stylesheet. */
  --measure: 62ch;
  --measure-short: 46ch;
  --measure-note: 40ch;
  --measure-quote: 26ch;
  --measure-head: 20ch;
  --measure-head-page: 18ch;
  --measure-display: 15ch;
  --shell: 1120px;

  /* Höhe des klebenden Kopfes. Steuert zugleich scroll-padding-top, damit
     angesprungene Überschriften nicht darunter verschwinden. */
  --header-h: 72px;
}

/* Auf großen Bildschirmen wird die Satzbreite NICHT breiter. Fließtext bleibt
   lesbar. Nur der Rahmen für Kopf, Abbildungen und Formular wächst mit. */
@media (min-width: 1440px) {
  :root {
    --shell: 1320px;
  }
}

/* --- Dunkles Skin: handwerk.digi-works.org ------------------------------- */

[data-skin="dark"] {
  --color-paper: oklch(20.8% 0.05 256);
  --color-paper-2: oklch(26.3% 0.072 258);
  --color-paper-raised: oklch(33.5% 0.081 255);
  --color-ink: oklch(96.8% 0.007 248);
  --color-ink-2: oklch(84.8% 0.025 248);
  --color-ink-3: oklch(74.7% 0.035 253);
  --color-accent: oklch(75% 0.128 82);
  --color-accent-bright: oklch(67.3% 0.138 77);
  --color-accent-wash: oklch(30% 0.045 80);
  --color-rule: oklch(38% 0.055 252);
  --color-rule-strong: oklch(44% 0.065 250);
  --color-focus: oklch(75% 0.128 82);
  --color-ok: oklch(69.6% 0.149 162);
  --color-bad: oklch(58% 0.18 29);
}