/* AnnexSERVER — Design-Tokens * * Verbindliche Quelle: docs/identity.md (v1.0). Hier werden die dort * festgelegten Custom Properties auf die Website abgebildet: Familien- * Neutrale, Steel als Linien-Ton (Instrument, kein Anstrich — ~5 %-Regel), * Familien-Spektrum nur als Signatur, Manrope für Marke/Headlines. * * Hell/Dunkel: prefers-color-scheme, übersteuerbar per data-theme am * -Element (Toggle, localStorage). */ @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } :root { /* Neutral (Familie) */ --ink: #141317; --graphite: #3A3A42; --slate: #6E6E78; --hairline: #E6E4E0; --paper: #FAF9F7; --surface: #FFFFFF; --void: #0E0D11; /* Steel (Linien-Ton AnnexSERVER) */ --steel: #64748B; --steel-dark: #475569; --steel-light: #94A3B8; /* Familien-Spektrum (Signatur, nur Hero/Footer) */ --spectrum-indigo: #6366F1; --spectrum-orange: #F97316; --spectrum-pink: #EC4899; --spectrum-amber: #E0992E; --spectrum-cyan: #06B6D4; --spectrum-violet: #8B5CF6; --spectrum-red: #EF4444; --spectrum-blue: #3B82F6; --spectrum-green: #22C55E; --spectrum-rose: #E11D48; /* Typo */ --font-brand: "Manrope", "Avenir Next", "Avenir", "Segoe UI", sans-serif; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* Semantik Light (Kontraste: ink auf paper 15.4:1, slate auf paper 4.6:1, steel-dark auf paper 6.0:1 — alles WCAG AA) */ --bg: var(--paper); --bg-surface: var(--surface); --border: var(--hairline); --text: var(--ink); --text-secondary: var(--slate); --accent: var(--steel); --accent-text: var(--steel-dark); --link: var(--steel-dark); /* Statusfarben (funktional, kein Marken-Statement) */ --ok: #1F7A4D; --warn: #8A5A00; --err: #A32B2B; --radius: 10px; --wrap: 64rem; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Semantik Dark (paper auf void 15.9:1, #9B9BA3 auf void 7.4:1, steel-light auf void 7.2:1 — WCAG AA) */ --bg: var(--void); --bg-surface: var(--ink); --border: var(--graphite); --text: #FAF9F7; --text-secondary: #9B9BA3; --accent: var(--steel-light); --accent-text: var(--steel-light); --link: var(--steel-light); --ok: #5FC48C; --warn: #E0A83C; --err: #E07070; color-scheme: dark; } } [data-theme="dark"] { --bg: var(--void); --bg-surface: var(--ink); --border: var(--graphite); --text: #FAF9F7; --text-secondary: #9B9BA3; --accent: var(--steel-light); --accent-text: var(--steel-light); --link: var(--steel-light); --ok: #5FC48C; --warn: #E0A83C; --err: #E07070; color-scheme: dark; } [data-theme="light"] { color-scheme: light; }