/* ============================================================================ Wilhelmsson Labs. Design Tokens v1.0 ============================================================================ Single source of truth for all Wilhelmsson Labs sites and products (RestaurangAI, OS, AdvokatAI, SiffrAI, TandlakarAI and forthcoming verticals). Usage: Then reference tokens with var(--wl-*) in your CSS. Philosophy: 1. Kraft med hallning (crimson plus svart) 2. Restraint over maximalism (max 1 brand color) 3. Lighter weights for display (Stripe rule) 4. 8pt grid spacing 5. Cubic-bezier motion, never default ease Author: Rickard Wilhelmsson Date: 2026-05-10 Version: 1.0 ============================================================================ */ :root { /* COLOR : Brand */ --wl-color-crimson: #dc2626; --wl-color-crimson-soft: #ef4444; --wl-color-crimson-deep: #b91c1c; --wl-color-crimson-glow: rgba(220, 38, 38, 0.32); --wl-color-crimson-tint: rgba(220, 38, 38, 0.08); /* COLOR : Foundation */ --wl-color-bg: #050508; --wl-color-bg-elevated: #0c0c10; --wl-color-bg-raised: #14141a; --wl-color-text: #fafafa; --wl-color-text-muted: #a1a1aa; --wl-color-text-dim: #71717a; /* COLOR : Inverted (light surfaces: print, PDF, signature) */ --wl-color-bg-light: #fafafa; --wl-color-text-on-light: #18181b; --wl-color-text-muted-on-light: #52525b; /* COLOR : Neutrals (10 step scale, slate) */ --wl-neutral-50: #fafafa; --wl-neutral-100: #f4f4f5; --wl-neutral-200: #e4e4e7; --wl-neutral-300: #d4d4d8; --wl-neutral-400: #a1a1aa; --wl-neutral-500: #71717a; --wl-neutral-600: #52525b; --wl-neutral-700: #3f3f46; --wl-neutral-800: #27272a; --wl-neutral-900: #18181b; --wl-neutral-950: #09090b; /* COLOR : Functional */ --wl-color-success: #22c55e; --wl-color-danger: #ef4444; --wl-color-warning: #f59e0b; --wl-color-info: #3b82f6; /* COLOR : Borders */ --wl-border-subtle: rgba(255, 255, 255, 0.06); --wl-border-default: rgba(255, 255, 255, 0.10); --wl-border-strong: rgba(255, 255, 255, 0.16); --wl-border-on-light: rgba(0, 0, 0, 0.08); /* TYPOGRAPHY */ --wl-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --wl-font-body: 'Inter', system-ui, -apple-system, sans-serif; --wl-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --wl-text-xs: 0.75rem; --wl-text-sm: 0.875rem; --wl-text-base: 1rem; --wl-text-lg: 1.125rem; --wl-text-xl: 1.25rem; --wl-text-2xl: 1.5rem; --wl-text-3xl: 1.875rem; --wl-text-4xl: 2.25rem; --wl-text-5xl: 3rem; --wl-text-6xl: 3.75rem; --wl-text-7xl: 4.5rem; --wl-text-8xl: 6rem; --wl-text-9xl: 8rem; --wl-text-display: clamp(3rem, 8vw, 6rem); --wl-leading-none: 1; --wl-leading-tight: 1.05; --wl-leading-snug: 1.2; --wl-leading-normal: 1.4; --wl-leading-relaxed: 1.6; --wl-leading-loose: 1.8; --wl-tracking-tightest: -0.05em; --wl-tracking-tighter: -0.04em; --wl-tracking-tight: -0.02em; --wl-tracking-snug: -0.01em; --wl-tracking-normal: 0; --wl-tracking-wide: 0.05em; --wl-tracking-wider: 0.08em; --wl-tracking-widest: 0.12em; --wl-weight-light: 300; --wl-weight-regular: 400; --wl-weight-medium: 500; --wl-weight-semibold: 600; --wl-weight-bold: 700; /* SPACING (8pt grid) */ --wl-space-0: 0; --wl-space-1: 4px; --wl-space-2: 8px; --wl-space-3: 12px; --wl-space-4: 16px; --wl-space-5: 20px; --wl-space-6: 24px; --wl-space-8: 32px; --wl-space-10: 40px; --wl-space-12: 48px; --wl-space-16: 64px; --wl-space-20: 80px; --wl-space-24: 96px; --wl-space-32: 128px; --wl-space-40: 160px; --wl-space-48: 192px; --wl-space-56: 224px; --wl-space-64: 256px; /* RADIUS */ --wl-radius-none: 0; --wl-radius-xs: 4px; --wl-radius-sm: 8px; --wl-radius-md: 12px; --wl-radius-lg: 16px; --wl-radius-xl: 24px; --wl-radius-2xl: 32px; --wl-radius-pill: 9999px; --wl-radius-full: 9999px; /* SHADOW (3 layer stack) */ --wl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18); --wl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.12); --wl-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.20), 0 4px 8px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.10); --wl-shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.20), 0 8px 16px rgba(0, 0, 0, 0.18), 0 24px 48px rgba(0, 0, 0, 0.16); --wl-shadow-xl: 0 2px 4px rgba(0, 0, 0, 0.24), 0 16px 32px rgba(0, 0, 0, 0.20), 0 48px 96px rgba(0, 0, 0, 0.18); --wl-shadow-light-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04); --wl-shadow-light-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.06); --wl-shadow-glow: 0 0 32px rgba(220, 38, 38, 0.28); --wl-shadow-glow-lg: 0 0 64px rgba(220, 38, 38, 0.20), 0 0 24px rgba(220, 38, 38, 0.32); /* MOTION */ --wl-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --wl-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --wl-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --wl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --wl-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --wl-duration-instant: 80ms; --wl-duration-fast: 150ms; --wl-duration-base: 200ms; --wl-duration-slow: 300ms; --wl-duration-slower: 500ms; --wl-duration-hero: 800ms; --wl-duration-epic: 1200ms; /* Z-INDEX */ --wl-z-below: -1; --wl-z-base: 0; --wl-z-raised: 10; --wl-z-dropdown: 100; --wl-z-sticky: 200; --wl-z-overlay: 300; --wl-z-modal: 400; --wl-z-toast: 500; --wl-z-tooltip: 600; --wl-z-max: 9999; /* LAYOUT */ --wl-container-sm: 640px; --wl-container-md: 768px; --wl-container-lg: 1024px; --wl-container-xl: 1280px; --wl-container-2xl: 1440px; --wl-container-prose: 65ch; } /* PRINT, PDF override */ @media print { :root { --wl-color-bg: #ffffff; --wl-color-bg-elevated: #ffffff; --wl-color-bg-raised: #f9f9f7; --wl-color-text: #18181b; --wl-color-text-muted: #52525b; --wl-color-text-dim: #a1a1aa; --wl-border-subtle: rgba(0, 0, 0, 0.06); --wl-border-default: rgba(0, 0, 0, 0.10); --wl-border-strong: rgba(0, 0, 0, 0.16); --wl-shadow-md: var(--wl-shadow-light-md); } } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { :root { --wl-duration-instant: 1ms; --wl-duration-fast: 1ms; --wl-duration-base: 1ms; --wl-duration-slow: 1ms; --wl-duration-slower: 1ms; --wl-duration-hero: 1ms; --wl-duration-epic: 1ms; } }