/* ============================================================ Vivrix Tools · Design Tokens Import via: ============================================================ */ :root { /* ---- Brand ---- */ --vx-orange: #F79420; /* Signal, primäre Aktion */ --vx-orange-deep: #D9791A; /* Hover / Active für Orange-Flächen */ --vx-orange-soft: #FBE8CB; /* Warn-Backgrounds, Highlights */ --vx-ink: #16140F; /* Text, Hero-Flächen, warmes Schwarz */ --vx-ink-soft: #3B362E; --vx-paper: #F4F1EA; /* Seitenhintergrund (warmes Creme) */ --vx-paper-bright: #FBFAF6; /* Karten, Tabellen-Zebra */ /* ---- Akzent (Kennzahlen, Positiv-Werte) ---- */ --vx-accent: #2FA66A; /* Zaubertrank-Grün — Standard */ --vx-accent-deep: #1E8A55; --vx-accent-soft: #E2F3EA; /* Alternative Akzent-Palette (auf umschaltbar) */ --vx-accent-blue: #2E7CD6; --vx-accent-blue-deep: #1F5FAC; --vx-accent-blue-soft: #E2ECF8; /* ---- Semantik ---- */ --vx-success: var(--vx-accent); --vx-success-bg: var(--vx-accent-soft); --vx-success-fg: var(--vx-accent-deep); --vx-danger: #C2502F; --vx-danger-bg: #F8E5DD; --vx-danger-fg: #9C3E22; --vx-warn: #E0A23A; --vx-warn-bg: #FBE8CB; --vx-warn-fg: #8A6410; /* ---- Warme Neutrale ---- */ --vx-n-900: #16140F; --vx-n-800: #3B362E; --vx-n-600: #6F6A60; --vx-n-500: #9A9488; --vx-n-400: #C7C1B4; --vx-n-300: #E6E1D6; --vx-n-200: #EFEBE2; --vx-n-100: #F4F1EA; --vx-n-050: #FBFAF6; /* ---- Typografie ---- */ --vx-font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --vx-font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace; --vx-fs-display: 44px; --vx-fs-h1: 32px; --vx-fs-h2: 24px; --vx-fs-h3: 18px; --vx-fs-body: 15px; --vx-fs-small: 13px; --vx-fs-micro: 11px; --vx-lh-tight: 1.04; --vx-lh-normal: 1.55; --vx-lh-loose: 1.65; --vx-tracking-eyebrow: 0.16em; /* uppercase mono labels */ --vx-tracking-display: -0.02em; /* ---- Spacing (8er-System mit halben Schritten) ---- */ --vx-space-1: 4px; --vx-space-2: 8px; --vx-space-3: 12px; --vx-space-4: 16px; --vx-space-5: 20px; --vx-space-6: 24px; --vx-space-8: 32px; --vx-space-10: 40px; --vx-space-12: 48px; --vx-space-16: 64px; /* ---- Radius (eher knapp — werkzeughaft) ---- */ --vx-radius-1: 2px; /* Tags, kleine Badges */ --vx-radius-2: 4px; /* Buttons-XS, Eingabe-Innenelemente */ --vx-radius-3: 5px; /* Inputs, Buttons */ --vx-radius-4: 6px; /* Cards */ --vx-radius-5: 8px; /* große Container */ --vx-radius-pill: 999px; /* ---- Elevation (sparsam!) ---- */ --vx-shadow-1: 0 1px 0 rgba(22,20,15,0.06); --vx-shadow-2: 0 2px 6px -2px rgba(22,20,15,0.12); --vx-shadow-3: 0 8px 18px -8px rgba(22,20,15,0.25); --vx-shadow-hero: 0 30px 60px -44px rgba(22,20,15,0.5); /* ---- Border ---- */ --vx-border: 1px solid var(--vx-n-300); --vx-border-strong: 1.5px solid var(--vx-ink); /* ---- Motion ---- */ --vx-ease: cubic-bezier(.2,.7,.2,1); --vx-dur-fast: 120ms; --vx-dur-normal: 180ms; } /* Akzent-Theming via Attribut */ html[data-accent="blue"] { --vx-accent: var(--vx-accent-blue); --vx-accent-deep: var(--vx-accent-blue-deep); --vx-accent-soft: var(--vx-accent-blue-soft); --vx-success: var(--vx-accent-blue); --vx-success-bg: var(--vx-accent-blue-soft); --vx-success-fg: var(--vx-accent-blue-deep); } /* Basis-Reset / Typo-Bett */ html { font-family: var(--vx-font-sans); color: var(--vx-ink); } body { background: var(--vx-paper); margin: 0; -webkit-font-smoothing: antialiased; } /* Tabular-nums Utility für Zahlen-Spalten */ .vx-tnum { font-variant-numeric: tabular-nums; font-family: var(--vx-font-mono); }