/* steurifisch — Farb-Tokens Grundsatz: einfarbig. Schwarz + fixer Grauwert (kopierfest, K65). Akzentfarbe (Petrol) NUR digital — nie in Schriftsatz oder Urkunde. */ :root { /* ---- Basis-Palette (roh) ---- */ --color-black: #111111; /* Marken-/Textschwarz (Screen) */ --color-print-black:#000000; /* reines Schwarz für Print */ --color-paper: #ffffff; /* Fixer Grauwert — kopier-/scanfest, nicht heller als ~65% Schwarz. Hex + CMYK + Graustufen als Token eingefroren. */ --color-grey: #595959; /* CMYK 0/0/0/65 · Graustufe 35% Helligkeit */ /* Digitale Neutralstufen (nur Screen, nie Print) */ --color-grey-04: #f5f5f4; --color-grey-08: #ececeb; --color-grey-12: #e0e0de; --color-grey-20: #cdcdc9; --color-grey-40: #9c9c98; --color-grey-70: #4a4a4a; /* Einzige digitale Akzentfarbe — Petrol (satt, wärmer) */ --color-accent: #0d4d6b; --color-accent-ink: #0a3a52; /* gedrückt/hover-dunkel */ --color-accent-soft:#e3edf1; /* Fläche 8% */ /* Intern-Kennung — warme Sand-Fläche (einziger warmer Ton im System). Nur für interne Anwendungen; extern & Print bleiben neutral. */ --color-sand: #f5efe3; --color-sand-line: #e4dccb; --color-sand-ink: #7a5c2e; /* Marker-Text/Signet auf Sand */ /* ---- Semantische Aliase · LIGHT (Default) ---- */ --text-primary: var(--color-black); --text-secondary: var(--color-grey); --text-machine: var(--color-grey); /* Monospace-Metadaten */ --text-on-ink: var(--color-paper); --text-link: var(--color-accent); --surface-page: var(--color-paper); --surface-card: var(--color-paper); --surface-sunken: var(--color-grey-04); --surface-ink: var(--color-black); /* invertierte Flächen */ --surface-internal: var(--color-sand); /* intern-Kennung (Seiten-Hintergrund) */ --border-internal: var(--color-sand-line); --text-internal: var(--color-sand-ink); --ink: var(--color-black); /* Bild-Overlay/Multiply-Grundton */ --border-hairline: var(--color-grey-12); --border-default: var(--color-grey-20); --border-strong: var(--color-black); --focus-ring: var(--color-accent); color-scheme: light; } /* ---- Dark Mode — Marke invertiert (nur digital) ---- */ :root[data-theme="dark"] { --text-primary: #f4f4f2; --text-secondary: #a6a6a2; /* Grau für Dunkel aufgehellt */ --text-machine: #8f8f8b; --text-on-ink: var(--color-paper); --text-link: #63a7c8; /* Petrol für Dunkel aufgehellt */ --surface-page: #0e0e0e; --surface-card: #161615; --surface-sunken: #1d1d1c; --surface-ink: #f4f4f2; --surface-internal: #1f1a12; /* intern-Kennung dunkel — warmer Braunton */ --border-internal: #3a3020; --text-internal: #c99a52; --ink: #000000; /* Bild-Overlay bleibt schwarz — Duotone-Multiply */ --border-hairline: #262625; --border-default: #333331; --border-strong: #f4f4f2; --color-accent: #4b93b5; --color-accent-ink: #63a7c8; --color-accent-soft:#0f2833; --focus-ring: #63a7c8; color-scheme: dark; } /* Auto-Dark: Consumer setzt data-theme="dark" auf (per JS/prefers-color-scheme). Die Dark-Tokens leben ausschliesslich im registrierten [data-theme="dark"]-Scope oben. */