/* ============================================================ PSD-Studio — Gestaltungswerte. EINZIGE Quelle. Spiegel der Figma-Datei „PSD-Studio — Neu gedacht" (fileKey tSd3wcXx2j64QN5SmG9ITI): Sammlungen Primitiv → Thema (Modi Tageslicht / Dunkelkammer) → Mass. Figma ist die Vorlage, diese Datei wird danach nachgezogen. app.css und start.css enthalten keine eigenen Farbwerte. Zwei Lichtstimmungen aus denselben Rollen: Dunkelkammer Grundzustand (:root) — neutrale Nacht für die Arbeit am Bild Tageslicht [data-licht="tag"] am — warmes Papier für Start, Umwandler, Ausgabe; app.js schaltet um Schrift: Instrument Sans / Instrument Serif / JetBrains Mono, lokal (assets/fonts, SIL OFL 1.1). Kein Aufruf fremder Server. ============================================================ */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-sans-400.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/instrument-sans-500.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/instrument-sans-600.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-400.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-400-kursiv.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); } :root { /* ---- Primitiv: nur hier stehen Farbwerte ---- */ --sand-25: #FCFBF8; --sand-50: #F2F0EB; --sand-100: #EBE8E1; --sand-200: #DDD9CF; --sand-500: #78736A; --schiefer-600: #5F5B66; --schiefer-700: #4A5163; /* untere Lage im Zeichen */ --schiefer-950: #1C1B21; --stein-300: #D6D5D2; --nacht-950: #0A0A0C; --nacht-900: #0E0E11; --nacht-850: #18181D; --nacht-800: #222228; --nacht-750: #2C2C34; --nacht-500: #6E6B7A; --nacht-300: #A6A3B0; --nacht-50: #EEECF3; --violett-300: #B3A4FF; --violett-400: #9B87FF; --violett-500: #8B7BFF; /* Zeichen */ --violett-600: #5A3FF0; --violett-700: #4A30DC; --violett-950: #141119; --tuerkis-400: #2FE6D4; --tuerkis-600: #12B5A8; /* Vektor-Anker: hebt sich auch auf Weiß ab */ --tuerkis-700: #0E8C80; --koralle-400: #FF8A7A; --koralle-700: #C4432F; --weiss: #FFFFFF; /* ---- Mass ---- */ --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 20px; --abstand-6: 24px; --abstand-8: 32px; --abstand-12: 48px; --radius-klein: 6px; --radius-mittel: 10px; --radius-gross: 14px; /* Insel */ --radius-pille: 999px; --hoehe-knopf: 36px; --hoehe-knopf-klein: 28px; --hoehe-feld: 32px; /* Wertleiste, Zahlenfeld, Farbfeld */ --hoehe-werkzeug: 40px; --ziel-touch: 44px; /* Mindestziel bei Fingerbedienung */ --rand-insel: 16px; /* Abstand der Inseln zum Fensterrand */ --breite-spalte: 280px; /* rechte Inselspalte */ /* ---- Schrift: die Figma-Stile ---- */ --schrift-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --schrift-anzeige: 'Instrument Serif', Georgia, 'Times New Roman', serif; --schrift-zahl: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --stil-beschriftung: 500 12px/16px var(--schrift-ui); --stil-klein: 400 12px/16px var(--schrift-ui); --stil-text: 400 13px/18px var(--schrift-ui); --stil-text-stark: 500 13px/18px var(--schrift-ui); --stil-titel: 600 15px/20px var(--schrift-ui); --stil-titel-gross: 600 18px/24px var(--schrift-ui); --stil-zahl: 400 12px/16px var(--schrift-zahl); --stil-taste: 500 11px/14px var(--schrift-zahl); --stil-anzeige-gross: 400 64px/68px var(--schrift-anzeige); /* -1,5 % */ --stil-anzeige-mittel: 400 36px/42px var(--schrift-anzeige); /* -1 % */ --stil-fliesstext: 400 16px/24px var(--schrift-ui); /* ---- Bewegung (Konzeptseite der Figma-Datei) ---- */ --raus: cubic-bezier(0.23, 1, 0.32, 1); --rein-raus: cubic-bezier(0.77, 0, 0.175, 1); /* ---- Rollen: Dunkelkammer ---- Gerechnete Kontraste (Figma, Seite Grundlagen): text-primaer auf insel 15,10 · text-sekundaer auf feld 6,39 marke als Text auf insel 6,15 · auf-akzent auf marke 6,50 linie-bedienung auf feld 3,05 */ --grund-buehne: var(--nacht-950); --grund-papier: var(--nacht-900); --grund-leiste: var(--nacht-850); /* Insel */ --grund-feld: var(--nacht-800); --linie-standard: var(--nacht-750); --linie-bedienung: var(--nacht-500); --text-primaer: var(--nacht-50); --text-sekundaer: var(--nacht-300); --text-auf-akzent: var(--violett-950); --akzent-marke: var(--violett-400); --akzent-hover: var(--violett-300); --akzent-gedrueckt: var(--violett-300); --akzent-zweit: var(--tuerkis-400); --akzent-toenung: rgb(155 135 255 / .16); --markierung: rgb(155 135 255 / .32); --status-warnung: var(--koralle-400); --warn-toenung: rgb(255 138 122 / .1); --warn-rahmen: rgb(255 138 122 / .36); --schach-hell: #3B3F4A; /* Transparenz-Schachbrett, neutral */ --schach-dunkel: #2F333C; --schatten-insel: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px rgb(0 0 0 / .35); --schatten-blatt: 0 2px 6px rgb(0 0 0 / .4), 0 24px 64px rgb(0 0 0 / .55); --schatten-buehne: 0 16px 48px rgb(0 0 0 / .5); --schleier: rgb(0 0 0 / .55); --innen-druck: inset 0 1px 3px rgb(0 0 0 / .18); color-scheme: dark; } /* ---- Rollen: Tageslicht ---- text-primaer auf insel 16,52 · text-sekundaer auf feld 5,41 marke als Text auf insel 5,96 · auf-akzent auf marke 6,17 linie-bedienung auf feld 3,85 */ /* .licht-tag: ein Teilbaum im Tageslicht, solange keine Lichtstimmung ausdrücklich gewählt ist (Ausgabe, Figma Seite Konzept). */ :root[data-licht="tag"], :root[data-lichtwahl="auto"] .licht-tag { --grund-buehne: var(--stein-300); --grund-papier: var(--sand-50); --grund-leiste: var(--sand-25); --grund-feld: var(--sand-100); --linie-standard: var(--sand-200); --linie-bedienung: var(--sand-500); --text-primaer: var(--schiefer-950); --text-sekundaer: var(--schiefer-600); --text-auf-akzent: var(--weiss); --akzent-marke: var(--violett-600); --akzent-hover: var(--violett-700); --akzent-gedrueckt: var(--violett-700); --akzent-zweit: var(--tuerkis-700); --akzent-toenung: rgb(90 63 240 / .12); --markierung: rgb(90 63 240 / .22); --status-warnung: var(--koralle-700); --warn-toenung: rgb(196 67 47 / .08); --warn-rahmen: rgb(196 67 47 / .36); --schach-hell: #F4F3F0; --schach-dunkel: #DCDAD5; --schatten-insel: 0 1px 2px rgb(16 13 26 / .06), 0 8px 24px rgb(16 13 26 / .10); --schatten-blatt: 0 2px 6px rgb(16 13 26 / .08), 0 24px 64px rgb(16 13 26 / .22); --schatten-buehne: 0 16px 48px rgb(16 13 26 / .22); --schleier: rgb(28 27 33 / .45); color-scheme: light; } /* Auch im .licht-tag-Teilbaum neu ausrechnen: eigene Eigenschaften, die var() enthalten, werden dort ausgewertet, wo sie stehen — sonst trüge der Teilbaum Fokusring und Bestandsnamen der Dunkelkammer. */ :root, :root[data-lichtwahl="auto"] .licht-tag { /* Fokusring: 2 px Abstand in Inselfarbe, dann 2 px Marke. Als box-shadow, damit er keine Fläche braucht und nichts verschiebt. */ --fokusring: 0 0 0 2px var(--grund-leiste), 0 0 0 4px var(--akzent-marke); /* ---- Bestandsnamen ---- Per JavaScript erzeugtes Markup (korrektur.js, raster.js) und ältere Regeln benutzen diese Namen. Sie zeigen auf die Rollen. */ --grund-insel: var(--grund-leiste); --grau-700: var(--schiefer-700); --tinte: var(--grund-buehne); --schale: var(--grund-leiste); --schale2: var(--grund-feld); --linie: var(--linie-standard); --schrift: var(--text-primaer); --schrift2: var(--text-sekundaer); --signal: var(--akzent-marke); --signal-hell: var(--akzent-hover); --signal-tief: var(--akzent-gedrueckt); --zweit: var(--akzent-zweit); --warn: var(--status-warnung); --radius: var(--radius-mittel); caret-color: var(--akzent-marke); accent-color: var(--akzent-marke); }