/* ============================================================ EverAfter — Company Design Tokens Single source of truth for colors, typography, spacing, and light / dark mode. Load this BEFORE any other CSS. ============================================================ */ /* ── Web fonts ───────────────────────────────────────────────── */ /* Loaded via in base.html to avoid CSS @import blocking the render path */ :root { color-scheme: light; /* ── Brand palette ───────────────────────────────────────── */ --navy: #1a2c42; --navy-dark: #0f1a27; --gold: #c4a860; --slate: #2C3E50; --light-grey: #F8F9FA; /* ── Semantic colours — Light Mode (default) ─────────────── */ --primary: var(--navy); /* Navy Blue */ --primary-dark: var(--navy-dark); --primary-hover: var(--primary-dark); --accent: var(--gold); /* Button — bg derives from primary; text chosen for ≥ 4.5:1 contrast */ --btn-bg: var(--primary); --btn-bg-hover: var(--primary-hover); --btn-text: #eef4ff; /* Champagne */ /* Text */ --dark-text: #1a2c42; /* Navy Blue - für Links und Überschriften */ --light-text: rgba(30, 45, 60, 0.87); /* Dunkles Grau für Secondary-Text */ --muted-text: rgba(40, 55, 70, 0.70); /* Mitteldunkles Grau für placeholder/text */ --text-secondary: rgba(40, 55, 70, 0.85); /* Sichtbares Grau */ /* Aliases for component-level usage */ --text-primary: var(--dark-text); --text-muted: var(--muted-text); /* Feedback */ --error: #e76c6d; --error-hover: #c95b5c; --success: #6b8e6f; --success-text: #a8d5ab; /* Surfaces — Champagne Luxury Palette */ --bg-body: #FDFCFB; /* Neutral champagne white background */ --bg-section: #FDFCFB; /* Aligned with body for cohesion */ --light-bg: #FDFCFB; /* Lightest surface (same as body) */ --card-bg: #FFFFFF; /* Pure white for elevated cards */ --card-bg-hover: rgba(26, 44, 66, 0.04); /* Subtle navy hover tint */ --input-bg: #FFFFFF; /* White inputs match card elevation */ --bg-hover: rgba(26, 44, 66, 0.04); /* Subtle navy hover tint */ /* Borders & glows */ --border: rgba(0, 0, 0, 0.05); /* More subtle on white cards */ --border-primary: color-mix(in srgb, var(--gold) 20%, transparent); /* Gold-tinted primary border */ --glow: color-mix(in srgb, var(--gold) 8%, transparent); /* Warm gold glow for accents */ /* Accent tints — derived from --primary via color-mix() */ --at-02: color-mix(in srgb, var(--primary) 2%, transparent); --at-03: color-mix(in srgb, var(--primary) 3%, transparent); --at-04: color-mix(in srgb, var(--primary) 4%, transparent); --at-05: color-mix(in srgb, var(--primary) 5%, transparent); --at-06: color-mix(in srgb, var(--primary) 6%, transparent); --at-07: color-mix(in srgb, var(--primary) 7%, transparent); --at-08: color-mix(in srgb, var(--primary) 8%, transparent); --at-09: color-mix(in srgb, var(--primary) 9%, transparent); --at-10: color-mix(in srgb, var(--primary) 10%, transparent); --at-12: color-mix(in srgb, var(--primary) 12%, transparent); --at-14: color-mix(in srgb, var(--primary) 14%, transparent); --at-15: color-mix(in srgb, var(--primary) 15%, transparent); --at-18: color-mix(in srgb, var(--primary) 18%, transparent); --at-20: color-mix(in srgb, var(--primary) 20%, transparent); --at-22: color-mix(in srgb, var(--primary) 22%, transparent); --at-25: color-mix(in srgb, var(--primary) 25%, transparent); --at-28: color-mix(in srgb, var(--primary) 28%, transparent); --at-30: color-mix(in srgb, var(--primary) 30%, transparent); --at-35: color-mix(in srgb, var(--primary) 35%, transparent); --at-40: color-mix(in srgb, var(--primary) 40%, transparent); --at-45: color-mix(in srgb, var(--primary) 45%, transparent); --at-50: color-mix(in srgb, var(--primary) 50%, transparent); --at-55: color-mix(in srgb, var(--primary) 55%, transparent); --at-60: color-mix(in srgb, var(--primary) 60%, transparent); --at-65: color-mix(in srgb, var(--primary) 65%, transparent); --at-70: color-mix(in srgb, var(--primary) 70%, transparent); --at-80: color-mix(in srgb, var(--primary) 80%, transparent); /* Gold accent tints — for secondary elements */ --gt-04: color-mix(in srgb, var(--gold) 4%, transparent); --gt-08: color-mix(in srgb, var(--gold) 8%, transparent); --gt-12: color-mix(in srgb, var(--gold) 12%, transparent); --gt-15: color-mix(in srgb, var(--gold) 15%, transparent); --gt-20: color-mix(in srgb, var(--gold) 20%, transparent); /* ── Typography ──────────────────────────────────────────── */ --font-display: 'Playfair Display', serif; --font-body: 'Barlow', sans-serif; /* ── Spacing scale ───────────────────────────────────────── */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; /* ── Motion ──────────────────────────────────────────────── */ --transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: background-color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out; } /* ── Dark Mode overrides ─────────────────────────────────────── */ html.dark-mode { color-scheme: dark; --primary: var(--gold); --primary-dark: #d4ba78; --primary-hover: var(--primary-dark); --accent: var(--primary); --btn-text: #0a120a; /* 9.4:1 on #c4a860 ✓ WCAG AAA */ --dark-text: #FDF5E6; --light-text: rgba(253, 245, 230, 0.65); --muted-text: rgba(253, 245, 230, 0.4); --text-secondary: rgba(253, 245, 230, 0.65); --error: #d4635c; --error-hover: #c0534c; --bg-body: #0a120a; --bg-section: #0f1a0f; --light-bg: #0f1a0f; --card-bg: rgba(255, 255, 255, 0.04); --card-bg-hover: rgba(255, 255, 255, 0.08); --input-bg: rgba(255, 255, 255, 0.05); --bg-hover: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.07); }