/** * Daten24 Design Tokens * --------------------------------------------------------------- * Single source of truth for colors, spacing, radii, shadows, type. * Light theme = :root default. Dark theme via [data-theme="dark"] * on (set FOUC-free by inline script in functions.php) with * a prefers-color-scheme fallback for no-JS visitors. * * All values validated for WCAG AA contrast (>= 4.5:1 for text). * Documentation: DESIGN-SYSTEM.md in the theme root. */ /* ============================================================ 1. PRIMITIVES (raw palette - do not use directly in pages, use the semantic tokens in section 2/3 instead) ============================================================ */ :root { /* Petrol / deep teal-blue - trust & privacy brand color */ --d24-petrol-50: #EFF8FA; --d24-petrol-100: #D8EEF2; --d24-petrol-200: #AEDCE4; --d24-petrol-300: #7BC3D0; --d24-petrol-400: #40A2B4; --d24-petrol-500: #17869B; --d24-petrol-600: #0B6A7D; --d24-petrol-700: #095566; --d24-petrol-800: #0A4551; --d24-petrol-900: #0A3944; --d24-petrol-950: #06262E; /* Mint / fresh teal - accent for dark surfaces & highlights */ --d24-mint-300: #6FEAD1; --d24-mint-400: #29D3B0; --d24-mint-500: #00C29A; --d24-mint-600: #00A583; /* Neutrals (cool slate with a hint of blue) */ --d24-neutral-0: #FFFFFF; --d24-neutral-50: #F6F8FA; --d24-neutral-100: #EDF1F5; --d24-neutral-200: #D9E1E8; --d24-neutral-300: #B9C6D0; --d24-neutral-400: #8CA0AE; --d24-neutral-500: #5B6B78; --d24-neutral-600: #3D4E5C; --d24-neutral-700: #2A3945; --d24-neutral-800: #1D2A34; --d24-neutral-900: #16232E; --d24-neutral-950: #0C161D; /* Navy neutrals (dark theme surfaces - brand continuity) */ --d24-navy-950: #0A0E27; --d24-navy-900: #10152E; --d24-navy-800: #131A33; --d24-navy-700: #1C2440; --d24-navy-600: #263156; --d24-navy-500: #3A4770; --d24-navy-400: #5C6A96; --d24-navy-300: #8B98B8; --d24-navy-200: #C0CAE2; --d24-navy-100: #F1F4FB; /* Supporting hues */ --d24-violet-400: #9D8CFF; --d24-violet-500: #6C5CE7; --d24-violet-600: #5742D0; --d24-gold-300: #FFD700; --d24-gold-600: #8A5A00; /* Status primitives */ --d24-green-200: #A8E8C6; --d24-green-400: #3DCE8B; --d24-green-600: #1B7A47; --d24-green-50: #E4F5EB; --d24-amber-400: #F5B84B; --d24-amber-600: #8A5A00; --d24-amber-50: #FCF3E0; --d24-red-400: #F47C74; --d24-red-600: #B3352E; --d24-red-50: #FBEAE9; /* ============================================================ Non-color tokens (theme independent) ============================================================ */ /* Typography - fonts already loaded by the theme (Google Fonts Inter + Montserrat), with a full system fallback stack. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-heading: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Type scale (1.250 major third, 16px base) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5625rem; /* 25px */ --text-3xl: 1.9375rem; /* 31px */ --text-4xl: 2.4375rem; /* 39px */ --text-5xl: 3.0625rem; /* 49px */ --leading-tight: 1.2; --leading-normal: 1.6; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Spacing scale (4px base) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Motion */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --container-max: 1200px; --header-height: 72px; /* Z-index scale */ --z-header: 1000; --z-dropdown: 1100; --z-modal: 1300; --z-toast: 1400; } /* ============================================================ 2. SEMANTIC TOKENS - LIGHT THEME (default) ============================================================ */ :root { color-scheme: light; /* Surfaces */ --bg: var(--d24-neutral-50); --bg-elevated: var(--d24-neutral-0); --bg-subtle: var(--d24-neutral-100); /* hover states, wells */ --bg-inset: var(--d24-neutral-200); /* progress tracks etc. */ --bg-header: rgba(255, 255, 255, 0.85); --bg-overlay: rgba(12, 22, 29, 0.55); /* modal backdrop */ /* Text (all >= 4.5:1 on --bg and --bg-elevated) */ --text: var(--d24-neutral-900); --text-secondary: var(--d24-neutral-600); --text-muted: var(--d24-neutral-500); --text-inverse: var(--d24-neutral-0); /* Borders */ --border: var(--d24-neutral-200); --border-strong: var(--d24-neutral-300); /* Accent (petrol) */ --accent: var(--d24-petrol-600); /* 6.2:1 on white */ --accent-hover: var(--d24-petrol-700); --accent-contrast: #FFFFFF; /* text on accent */ --accent-subtle: var(--d24-petrol-50); /* tinted bg */ --accent-border: var(--d24-petrol-200); --accent-2: var(--d24-mint-600); /* fresh secondary accent */ /* Status */ --success: var(--d24-green-600); --success-bg: var(--d24-green-50); --success-contrast: #FFFFFF; --warning: var(--d24-amber-600); --warning-bg: var(--d24-amber-50); --warning-contrast: #FFFFFF; --danger: var(--d24-red-600); --danger-bg: var(--d24-red-50); --danger-contrast: #FFFFFF; /* Shadows */ --shadow-sm: 0 1px 2px rgba(12, 22, 29, 0.06), 0 1px 3px rgba(12, 22, 29, 0.08); --shadow-md: 0 4px 12px rgba(12, 22, 29, 0.08), 0 2px 4px rgba(12, 22, 29, 0.05); --shadow-lg: 0 12px 32px rgba(12, 22, 29, 0.14), 0 4px 8px rgba(12, 22, 29, 0.06); --shadow-glow: 0 0 0 4px rgba(11, 106, 125, 0.15); /* Focus ring */ --focus-ring: 0 0 0 3px rgba(11, 106, 125, 0.35); /* Decorative gradient (hero, brand elements) */ --gradient-brand: linear-gradient(135deg, var(--d24-petrol-600), var(--d24-mint-600)); } /* ============================================================ 3. SEMANTIC TOKENS - DARK THEME ============================================================ */ [data-theme="dark"] { color-scheme: dark; --bg: var(--d24-navy-950); --bg-elevated: var(--d24-navy-800); --bg-subtle: var(--d24-navy-700); --bg-inset: var(--d24-navy-900); --bg-header: rgba(10, 14, 39, 0.85); --bg-overlay: rgba(3, 6, 18, 0.7); --text: var(--d24-navy-100); --text-secondary: var(--d24-navy-200); --text-muted: var(--d24-navy-300); --text-inverse: var(--d24-navy-950); --border: var(--d24-navy-600); --border-strong: var(--d24-navy-500); --accent: var(--d24-mint-400); /* 9.0:1 on elevated */ --accent-hover: var(--d24-mint-300); --accent-contrast: #04241D; /* dark text on mint */ --accent-subtle: rgba(41, 211, 176, 0.10); --accent-border: rgba(41, 211, 176, 0.35); --accent-2: var(--d24-violet-400); --success: var(--d24-green-400); --success-bg: rgba(61, 206, 139, 0.12); --success-contrast: #05231A; --warning: var(--d24-amber-400); --warning-bg: rgba(245, 184, 75, 0.12); --warning-contrast: #2A1D02; --danger: var(--d24-red-400); --danger-bg: rgba(244, 124, 116, 0.12); --danger-contrast: #2B0A08; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 20px rgba(41, 211, 176, 0.25); --focus-ring: 0 0 0 3px rgba(41, 211, 176, 0.45); --gradient-brand: linear-gradient(135deg, var(--d24-mint-400), var(--d24-violet-400)); } /* No-JS fallback: honor OS preference when no explicit choice was set. (Keep in sync with the [data-theme="dark"] block above.) */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; --bg: var(--d24-navy-950); --bg-elevated: var(--d24-navy-800); --bg-subtle: var(--d24-navy-700); --bg-inset: var(--d24-navy-900); --bg-header: rgba(10, 14, 39, 0.85); --bg-overlay: rgba(3, 6, 18, 0.7); --text: var(--d24-navy-100); --text-secondary: var(--d24-navy-200); --text-muted: var(--d24-navy-300); --text-inverse: var(--d24-navy-950); --border: var(--d24-navy-600); --border-strong: var(--d24-navy-500); --accent: var(--d24-mint-400); --accent-hover: var(--d24-mint-300); --accent-contrast: #04241D; --accent-subtle: rgba(41, 211, 176, 0.10); --accent-border: rgba(41, 211, 176, 0.35); --accent-2: var(--d24-violet-400); --success: var(--d24-green-400); --success-bg: rgba(61, 206, 139, 0.12); --success-contrast: #05231A; --warning: var(--d24-amber-400); --warning-bg: rgba(245, 184, 75, 0.12); --warning-contrast: #2A1D02; --danger: var(--d24-red-400); --danger-bg: rgba(244, 124, 116, 0.12); --danger-contrast: #2B0A08; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 20px rgba(41, 211, 176, 0.25); --focus-ring: 0 0 0 3px rgba(41, 211, 176, 0.45); --gradient-brand: linear-gradient(135deg, var(--d24-mint-400), var(--d24-violet-400)); } } /* ============================================================ 4. LEGACY ALIASES Existing page CSS uses --d24-* variables from the original dark-only theme. Map them onto the semantic tokens so every page adapts to both themes without touching its CSS. ============================================================ */ :root, [data-theme="dark"] { --d24-primary: var(--accent); --d24-primary-dark: var(--accent-hover); --d24-primary-light: var(--accent-hover); --d24-secondary: var(--accent-2); --d24-secondary-dark: var(--d24-violet-600); --d24-accent: var(--d24-gold-300); --d24-danger: var(--danger); --d24-success: var(--success); --d24-warning: var(--warning); --d24-bg-primary: var(--bg); --d24-bg-secondary: var(--bg-elevated); --d24-bg-tertiary: var(--bg-subtle); --d24-text-primary: var(--text); --d24-text-secondary: var(--text-secondary); --d24-text-muted: var(--text-muted); --d24-font-primary: var(--font-sans); --d24-font-heading: var(--font-heading); --d24-spacing-xs: var(--space-2); --d24-spacing-sm: var(--space-4); --d24-spacing-md: var(--space-6); --d24-spacing-lg: var(--space-10); --d24-spacing-xl: var(--space-16); --d24-shadow-sm: var(--shadow-sm); --d24-shadow-md: var(--shadow-md); --d24-shadow-lg: var(--shadow-lg); --d24-shadow-glow: var(--shadow-glow); --d24-radius-sm: var(--radius-sm); --d24-radius-md: var(--radius-md); --d24-radius-lg: var(--radius-lg); --d24-radius-xl: var(--radius-xl); --d24-transition: all var(--transition); }