/* ============================================================ HANDVANCE — Design Tokens (website-aligned) ============================================================ */ :root { /* Backgrounds */ --bg: #050914; --bg-card: #0a101d; --bg-muted: #0f1a2e; --bg-accent: #1e3a5f; --bg-navy: #162c6d; --bg-glass: rgba(255,255,255,0.03); --bg-glass-h: rgba(255,255,255,0.06); /* Text */ --fg: #f1f5f9; --fg-2: #94a3b8; --fg-3: #64748b; /* Brand */ --blue: #3b82f6; --blue-l: #60a5fa; --blue-dim: rgba(59,130,246,0.15); --blue-glow: rgba(59,130,246,0.35); /* Status */ --green: #22c55e; --green-dim: rgba(34,197,94,0.15); --red: #e40014; --red-soft: #ff4d6a; --red-dim: rgba(228,0,20,0.12); --orange: #f59e0b; --orange-dim: rgba(245,158,11,0.15); /* Borders */ --border: rgba(255,255,255,0.06); --border-h: rgba(255,255,255,0.12); --border-blue: rgba(59,130,246,0.3); --border-green:rgba(34,197,94,0.3); --border-red: rgba(228,0,20,0.3); /* Shadows */ --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 -1px 0 rgba(0,0,0,0.6) inset, 0 4px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.7); --shadow-lift: 0 1px 0 rgba(255,255,255,0.06) inset, 0 -1px 0 rgba(0,0,0,0.6) inset, 0 16px 48px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07); --shadow-blue: 0 0 24px var(--blue-glow), 0 4px 16px rgba(0,0,0,0.5); /* Typography */ --font-d: 'Barlow Condensed', sans-serif; --font: 'Figtree', system-ui, sans-serif; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px; /* Spacing */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; /* Safe area (iOS notch / home indicator, Android display cutouts) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* Layout chrome — bottom nav height (visible) + helpers so screens reserve enough scroll-bottom space that the last item never sits behind the nav. `--screen-top-pad` reserves Notch/Dynamic-Island plus großzügigen Sicherheitsabstand (s8 = 32px) — und ist auch ohne env() im Browser mindestens 44px hoch, damit nichts an der Statusleiste klebt. */ --nav-height: 64px; --nav-bottom-gap: 6px; /* leichter Abstand der Tabs zum Display-Rand */ --nav-height-total: calc(var(--nav-height) + var(--safe-bottom) + var(--nav-bottom-gap)); --screen-top-pad: max(calc(var(--safe-top) + var(--s8)), 44px); --screen-bottom-pad: calc(var(--nav-height-total) + var(--s4)); /* Motion */ --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-spring: cubic-bezier(0.34,1.56,0.64,1); --ease-smooth: cubic-bezier(0.25,0.46,0.45,0.94); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-in: 500ms; } /* Light theme overrides — toggled via .theme-light on */ .theme-light { --bg: #f8fafc; --bg-card: #ffffff; --bg-muted: #f1f5f9; --bg-accent: #dbeafe; --bg-navy: #e0e7ff; --bg-glass: rgba(15,23,42,0.03); --bg-glass-h: rgba(15,23,42,0.06); --fg: #0f172a; --fg-2: #475569; --fg-3: #64748b; --blue-dim: rgba(59,130,246,0.10); --blue-glow: rgba(59,130,246,0.25); --green-dim: rgba(34,197,94,0.12); --red-dim: rgba(228,0,20,0.08); --orange-dim: rgba(245,158,11,0.12); --border: rgba(15,23,42,0.08); --border-h: rgba(15,23,42,0.16); --border-blue: rgba(59,130,246,0.35); --border-green:rgba(34,197,94,0.35); --border-red: rgba(228,0,20,0.35); --shadow-card: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.05); --shadow-lift: 0 1px 0 rgba(255,255,255,0.9) inset, 0 12px 32px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.05); --shadow-blue: 0 0 20px var(--blue-glow), 0 4px 12px rgba(15,23,42,0.08); }