/* ============================================================= DSV-Gruppe / Sparkasse — City Wallet Design Tokens Hackathon "Generative City Wallet" Brand DNA: Otl Aicher heritage · Sparkassen-Rot HKS 13 · modular geometric system (LIGALUX 2022 redesign) ============================================================= */ :root { /* === BRAND CORE ============================================ */ /* Sparkassen-Rot HKS 13 — legally protected color trademark */ --brand-red: #FF0000; --brand-red-deep: #C8102E; /* hover, active, on-light surfaces */ --brand-red-soft: #FFE5E5; /* tinted backgrounds, badges */ --brand-red-ink: #6A0000; /* dark variant, deep contrast */ /* === NEUTRALS (warm-leaning, German functionalist) ========= */ --ink: #0A0A0A; --text-primary: #1A1A1A; --text-secondary: #4A4A4A; --text-tertiary: #8A8A8A; --text-on-red: #FFFFFF; --border-subtle: #EAEAEA; --border-default: #D4D4D4; /* === SURFACES ============================================== */ --surface: #FFFFFF; --surface-muted: #F5F5F5; --surface-sunken: #FAFAFA; --surface-overlay: rgba(10, 10, 10, 0.5); /* === SEMANTIC ============================================== */ --success: #00875A; /* cashback received, redeemed */ --success-soft: #E3FCEF; --warning: #FF8A3D; /* expiry urgency only */ --warning-soft: #FFF4E5; --error: #DE350B; --info: #0052CC; /* === TYPOGRAPHY ============================================ */ /* Inter mirrors the Otl-Aicher / Rotis heritage best among free fonts. Fallback to system stack. */ --font-sans: 'Inter', 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* Type scale — perfect-fourth-ish, mobile-first */ --text-xs: 0.75rem; /* 12 — meta, timestamps */ --text-sm: 0.875rem; /* 14 — secondary copy */ --text-base: 1rem; /* 16 — body */ --text-lg: 1.125rem; /* 18 — emphasis */ --text-xl: 1.5rem; /* 24 — card title */ --text-2xl: 2rem; /* 32 — offer headline (3-second read) */ --text-3xl: 2.5rem; /* 40 — hero amount, e.g. "−20%" */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; /* Numbers should be tabular for pricing, distance, countdown */ --font-feature-numeric: "tnum" 1, "lnum" 1; /* === SPACING (8pt grid) ==================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* === RADIUS (geometric, not playful) ======================= */ --radius-sm: 8px; --radius-md: 12px; /* default cards, inputs */ --radius-lg: 16px; /* offer widgets */ --radius-xl: 24px; /* primary buttons, pills */ --radius-full: 9999px; /* === ELEVATION (subtle, German restraint) ================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --shadow-red-glow: 0 8px 24px rgba(255, 0, 0, 0.18); /* === MOTION ================================================ */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; /* === LAYOUT ================================================ */ --container-mobile: 100%; --container-max: 420px; /* mobile-first wallet width */ --header-height: 56px; --nav-height: 64px; } /* ============================================================= DARK MODE — opt-in only via [data-theme="dark"] on or . Do NOT auto-apply via prefers-color-scheme: many of our surfaces (white card backgrounds in the consumer kit, monochrome merchant dashboard) are designed in light mode and would invert badly. ============================================================= */ [data-theme="dark"] { --ink: #FFFFFF; --text-primary: #F5F5F5; --text-secondary: #B8B8B8; --text-tertiary: #7A7A7A; --border-subtle: #2A2A2A; --border-default: #3A3A3A; --surface: #0F0F0F; --surface-muted: #1A1A1A; --surface-sunken: #050505; --brand-red: #FF1F1F; /* slightly lifted for contrast */ --brand-red-soft: #2A0808; }