/* ========================================================================= BIFO Media Solutions — Design Tokens Primary: #139d9d (Teal) · Accent: #9d9d13 (Olivgrün) Light & Dark Mode über [data-theme] auf , mit System-Fallback. ========================================================================= */ :root { color-scheme: light dark; /* --- Marken-Kernfarben (unveränderlich) --------------------------------- */ --bifo-teal: #139d9d; --bifo-olive: #9d9d13; /* --- Teal-Skala --------------------------------------------------------- */ --teal-50: #e7f6f6; --teal-100: #c3e9e9; --teal-200: #8fd6d6; --teal-300: #4dbfbf; --teal-400: #1fabab; --teal-500: #139d9d; --teal-600: #0f8484; --teal-700: #0c6a6a; --teal-800: #0a5454; --teal-900: #073d3d; /* --- Oliv-Skala --------------------------------------------------------- */ --olive-50: #f6f6e7; --olive-100: #e9e9c3; --olive-200: #d6d68f; --olive-300: #bfbf4d; --olive-400: #abab1f; --olive-500: #9d9d13; --olive-600: #848410; --olive-700: #6a6a0c; --olive-800: #54540a; --olive-900: #3d3d07; /* --- Typografie --------------------------------------------------------- */ --font-body: 'Inter', 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Jura', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* --- Radius & Schatten -------------------------------------------------- */ --radius-sm: 8px; --radius: 14px; --radius-lg: 24px; --shadow: 0 1px 2px rgba(7,61,61,.06), 0 8px 30px rgba(7,61,61,.08); --shadow-lg: 0 12px 50px rgba(7,61,61,.16); } /* === LIGHT MODE (Standard) ================================================ */ :root, [data-theme="light"] { --bg: #ffffff; --bg-subtle: #f3f8f8; --surface: #ffffff; --surface-2: #eef6f6; --border: #d7e7e7; --text: #0e1a1a; --text-muted: #4f6463; --primary: var(--teal-600); --primary-strong: var(--teal-700); --primary-contrast: #ffffff; --accent: var(--olive-700); --accent-strong: var(--olive-800); --accent-contrast: #ffffff; --ring: rgba(19,157,157,.35); --grad: linear-gradient(135deg, var(--teal-500), var(--teal-700)); --grad-duo:linear-gradient(120deg, var(--teal-500) 0%, var(--teal-600) 55%, var(--olive-600) 100%); } /* === DARK MODE ============================================================ */ [data-theme="dark"] { --bg: #0a1413; --bg-subtle: #0e1b1a; --surface: #112322; --surface-2: #16302e; --border: #1e3a38; --text: #e9f1f0; --text-muted: #9db3b1; /* Marken-Töne für ausreichenden Kontrast auf Dunkel aufgehellt */ --primary: var(--teal-300); --primary-strong: var(--teal-200); --primary-contrast: #04201f; --accent: var(--olive-300); --accent-strong: var(--olive-200); --accent-contrast: #16160a; --ring: rgba(77,191,191,.45); --grad: linear-gradient(135deg, var(--teal-400), var(--teal-700)); --grad-duo:linear-gradient(120deg, var(--teal-300) 0%, var(--teal-500) 55%, var(--olive-400) 100%); } /* === SYSTEM-FALLBACK (kein data-theme gesetzt) ============================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a1413; --bg-subtle: #0e1b1a; --surface: #112322; --surface-2: #16302e; --border: #1e3a38; --text: #e9f1f0; --text-muted: #9db3b1; --primary: var(--teal-300); --primary-strong: var(--teal-200); --primary-contrast: #04201f; --accent: var(--olive-300); --accent-strong: var(--olive-200); --accent-contrast: #16160a; --ring: rgba(77,191,191,.45); --grad: linear-gradient(135deg, var(--teal-400), var(--teal-700)); --grad-duo:linear-gradient(120deg, var(--teal-300) 0%, var(--teal-500) 55%, var(--olive-400) 100%); } }