/** * Landvex Design Tokens * German Enterprise / Siemens-vibes * Precision, clarity, systematic structure * * Usage: Import this file first, then apply tokens in component CSS. * All values are CSS custom properties — never hardcode raw values. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap'); :root { /* ─── GRAYSCALE (Light theme — white → deep carbon) ─────────────────────── */ --lv-white: #FFFFFF; --lv-gray-50: #F7F7F7; /* Page background */ --lv-gray-100: #EFEFEF; /* Subtle surface tint */ --lv-gray-200: #DEDEDE; /* Separator lines (thin) */ --lv-gray-400: #9A9A9A; /* Muted / secondary text */ --lv-gray-600: #5A5A5A; /* Caption / label text */ --lv-gray-800: #222222; /* Primary text */ --lv-deep-carbon: #111111; /* Display headlines */ /* ─── ACCENT COLORS ──────────────────────────────────────────────────────── */ --lv-enterprise-blue: #1B4FBF; /* Primary — links, CTAs, active states */ --lv-enterprise-dark: #0F2E6E; /* Hover / pressed state for blue */ --lv-accent-secondary: #3A3A3A; /* Secondary — dark borders, icon fills */ /* Accent with alpha */ --lv-blue-10: rgba(27, 79, 191, 0.10); --lv-blue-20: rgba(27, 79, 191, 0.20); /* ─── SEMANTIC COLORS ────────────────────────────────────────────────────── */ --lv-bg: var(--lv-white); --lv-bg-surface: var(--lv-gray-50); --lv-bg-subtle: var(--lv-gray-100); --lv-text-primary: var(--lv-gray-800); --lv-text-display: var(--lv-deep-carbon); --lv-text-muted: var(--lv-gray-600); --lv-text-placeholder: var(--lv-gray-400); --lv-text-link: var(--lv-enterprise-blue); --lv-border: var(--lv-gray-200); --lv-border-strong: var(--lv-gray-400); --lv-border-accent: var(--lv-enterprise-blue); /* ─── 8PX BASE GRID ──────────────────────────────────────────────────────── */ --lv-grid-base: 8px; /* Spacing — all multiples of 8px grid base */ --lv-space-1: 8px; /* 1 unit */ --lv-space-2: 16px; /* 2 units */ --lv-space-3: 24px; /* 3 units */ --lv-space-4: 32px; /* 4 units */ --lv-space-5: 40px; /* 5 units */ --lv-space-6: 48px; /* 6 units */ --lv-space-8: 64px; /* 8 units */ --lv-space-10: 80px; /* 10 units */ --lv-space-12: 96px; /* 12 units */ --lv-space-16: 128px; /* 16 units */ /* Legacy aliases (sm/md/lg) */ --lv-space-sm: var(--lv-space-1); --lv-space-md: var(--lv-space-3); --lv-space-lg: var(--lv-space-6); /* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */ /* Font stacks */ --lv-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --lv-font-serif: 'IBM Plex Serif', 'Georgia', 'Times New Roman', serif; --lv-font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* Type scale — LOCKED, same breakpoints as quiXzoom */ --lv-text-xs: 12px; --lv-text-sm: 16px; --lv-text-md: 24px; --lv-text-lg: 48px; --lv-text-xl: 64px; /* Font weights */ --lv-weight-light: 300; --lv-weight-regular: 400; --lv-weight-medium: 500; --lv-weight-semibold: 600; --lv-weight-bold: 700; /* Line heights — high density, enterprise-grade readability */ --lv-leading-tight: 1.2; /* Display headlines */ --lv-leading-snug: 1.35; /* Section headings */ --lv-leading-base: 1.55; /* Body text (signature Landvex value) */ --lv-leading-relaxed: 1.7; /* Long-form editorial */ /* Letter spacing */ --lv-tracking-tight: -0.01em; /* Large display */ --lv-tracking-normal: 0em; --lv-tracking-wide: 0.04em; /* Labels, caps */ --lv-tracking-widest: 0.10em; /* Overline / eyebrow */ /* ─── SEPARATOR LINES ────────────────────────────────────────────────────── */ /* Thin horizontal rules — core visual grammar of Landvex */ --lv-separator: 1px solid var(--lv-border); --lv-separator-strong: 1px solid var(--lv-border-strong); --lv-separator-accent: 2px solid var(--lv-enterprise-blue); /* ─── EASING ──────────────────────────────────────────────────────────────── */ /* Precise, measured — no drama */ --lv-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --lv-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --lv-ease-in: cubic-bezier(0.4, 0, 1, 1); /* Duration */ --lv-duration-fast: 120ms; --lv-duration-base: 200ms; --lv-duration-slow: 350ms; /* ─── BORDER RADIUS ──────────────────────────────────────────────────────── */ /* Enterprise: minimal rounding, precision-first */ --lv-radius-none: 0px; --lv-radius-sm: 2px; --lv-radius-md: 4px; --lv-radius-lg: 8px; --lv-radius-pill: 9999px; /* ─── SHADOW SYSTEM ──────────────────────────────────────────────────────── */ /* Light-theme shadows — subtle, structural, never decorative */ --lv-shadow-none: none; --lv-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04); --lv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); --lv-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.04); --lv-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.04); /* Focused / interactive — blue outline */ --lv-shadow-focus: 0 0 0 3px var(--lv-blue-20); /* ─── GRID / LAYOUT ──────────────────────────────────────────────────────── */ --lv-container-sm: 640px; --lv-container-md: 960px; --lv-container-lg: 1200px; --lv-container-xl: 1440px; --lv-column-gap: var(--lv-space-3); /* 24px gutter */ --lv-columns: 12; /* ─── Z-INDEX SCALE ──────────────────────────────────────────────────────── */ --lv-z-base: 0; --lv-z-raised: 10; --lv-z-overlay: 100; --lv-z-modal: 200; --lv-z-toast: 300; /* ─── TRANSITIONS ────────────────────────────────────────────────────────── */ --lv-transition-color: color var(--lv-duration-fast) var(--lv-ease-standard), background var(--lv-duration-fast) var(--lv-ease-standard), border-color var(--lv-duration-fast) var(--lv-ease-standard); --lv-transition-transform: transform var(--lv-duration-base) var(--lv-ease-standard); --lv-transition-shadow: box-shadow var(--lv-duration-base) var(--lv-ease-standard); } /* ─── UTILITY: APPLY LIGHT THEME ─────────────────────────────────────────── */ .lv-theme { background-color: var(--lv-bg); color: var(--lv-text-primary); font-family: var(--lv-font-sans); font-size: var(--lv-text-sm); line-height: var(--lv-leading-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }