/* Limber Martinez — "Slate & Teal" Design Tokens Single source of truth. Import in web/HTMX projects. Stand: 2026-06 · WCAG 2.1 AA. */ :root { /* Light surfaces */ --paper: #F7F6F3; --surface: #FFFFFF; --ink: #21262E; --ink-soft: #474D57; --mute: #6B7079; /* a11y 2026-06-03: war #777C86 (~3.9:1 auf paper) → jetzt ~4.65:1 (WCAG AA) */ --line: #E5E3DD; /* Accent (1 brand color) */ --accent: #117C66; /* on light — AA on --paper */ --accent-dark: #4FCBAA; /* on dark — AA on --dark-bg */ /* Dark surface (sidebar / hero / footer / dark mode) */ --dark-bg: #1D2530; --on-dark: #EEF0F2; --on-dark-mute: #9CA3AD; --on-dark-line: #2F3946; /* Type */ --font-sans: 'Geist', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --font-serif: 'Instrument Serif', Georgia, serif; /* optional, web only */ /* Scale (px) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.625rem; --text-4xl: 4rem; /* Space (4/8 grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* Radius / border */ --radius-sm: 4px; --radius-md: 6px; --border: 1px solid var(--line); /* Brand accent bar */ --accent-bar-h: 4px; --accent-bar-w: 56px; } /* Utility: dark surface context — re-maps text/line/accent for dark backgrounds. Apply to a sidebar/hero/footer wrapper:
*/ .surface-dark { background: var(--dark-bg); color: var(--on-dark); --ink: var(--on-dark); --ink-soft: var(--on-dark-mute); --mute: var(--on-dark-mute); --line: var(--on-dark-line); --accent: var(--accent-dark); } /* Eyebrow / section label */ .eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 2px; font-size: var(--text-xs); color: var(--accent); } /* Brand accent bar (place under headlines) */ .accent-bar { height: var(--accent-bar-h); width: var(--accent-bar-w); background: var(--accent); border: 0; } /* Base */ body { font-family: var(--font-sans); color: var(--ink); background: var(--paper); font-size: var(--text-base); line-height: 1.5; } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════ DARK MODE — added 2026-06-03 (global, automatisch + manueller Toggle). Spiegelt .surface-dark auf Dokument-Ebene. Marke bleibt "Slate & Teal". Zwei Accent-Rollen getrennt (für AA-Kontrast): --accent = Text/Links/Eyebrow/Bar → flippt im Dark auf #4FCBAA --accent-solid = Füllung (Primary-Button/Badge) + --on-accent als Text → bleibt tiefes Teal #117C66 in BEIDEN Modi (AA). ═══════════════════════════════════════════════════════════════ */ :root { --on-accent: #F7F6F3; /* Textfarbe auf Accent-Füllung (beide Modi) */ --accent-solid: var(--accent); /* Füll-Accent — tiefes Teal, kein Flip */ --surface-dark: #232C38; /* erhöhte Kartenfläche im Dark Mode */ color-scheme: light; } /* Automatisch nach OS-Einstellung (außer explizit [data-theme="light"]) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #1D2530; --surface: #232C38; --ink: #EEF0F2; --ink-soft: #9CA3AD; --mute: #9CA3AD; --line: #2F3946; --accent: #4FCBAA; /* Text-Accent hell-lesbar auf dunkel */ --accent-solid: #117C66; /* Füll-Accent bleibt tiefes Teal */ } } /* Manueller Toggle hat Vorrang: bzw. ="light" */ :root[data-theme="dark"] { color-scheme: dark; --paper: #1D2530; --surface: #232C38; --ink: #EEF0F2; --ink-soft: #9CA3AD; --mute: #9CA3AD; --line: #2F3946; --accent: #4FCBAA; --accent-solid: #117C66; } /* Reduced motion respektieren: Keyframe-Animationen + Auto-Scroll aus. Sanfte Opacity-Transitions (Reveal/Hover) bleiben erlaubt — störend ist Bewegung, nicht ein Fade. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }