/** * tokens.css * Design System Tokens for deinwebteam.de * * Defines all CSS custom properties (variables) for: * - Colors (oklch-based, light + dark mode) * - Typography (fluid scale with clamp()) * - Spacing scale * - Border radius * - Shadows (color-tinted, no pure black) * - Transitions * - Container widths * * Dark mode: [data-theme="dark"] override on * System preference is respected as default, manual override stored in localStorage. */ /* ============================================================ LIGHT MODE (Default) ============================================================ */ :root { /* ---------------------------------------------------------- Color — Accent (Deep Indigo/Navy) ---------------------------------------------------------- */ --color-accent: oklch(0.42 0.19 264); /* Primary indigo */ --color-accent-hover: oklch(0.36 0.19 264); /* Darker on hover */ --color-accent-subtle: oklch(0.95 0.04 264); /* Tinted surface (light) */ --color-accent-muted: oklch(0.75 0.10 264); /* Muted accent text */ /* ---------------------------------------------------------- Color — Surface (3 levels, light) ---------------------------------------------------------- */ --color-surface-1: oklch(0.99 0.003 264); /* Page background */ --color-surface-2: oklch(0.96 0.006 264); /* Card, panel */ --color-surface-3: oklch(0.92 0.010 264); /* Elevated card, nav bg */ /* ---------------------------------------------------------- Color — Text (3 levels, light) ---------------------------------------------------------- */ --color-text-1: oklch(0.14 0.025 264); /* Primary text */ --color-text-2: oklch(0.38 0.020 264); /* Secondary text */ --color-text-3: oklch(0.58 0.012 264); /* Tertiary/placeholder */ /* ---------------------------------------------------------- Color — Border (alpha-blended from text) ---------------------------------------------------------- */ --color-border: oklch(from var(--color-text-1) l c h / 0.10); --color-border-strong: oklch(from var(--color-text-1) l c h / 0.20); /* ---------------------------------------------------------- Color — Feedback ---------------------------------------------------------- */ --color-success: oklch(0.55 0.17 155); --color-success-bg: oklch(0.96 0.04 155); --color-error: oklch(0.50 0.22 25); --color-error-bg: oklch(0.97 0.04 25); --color-warning: oklch(0.70 0.18 75); --color-warning-bg: oklch(0.97 0.04 75); /* ---------------------------------------------------------- Color — Interactive ---------------------------------------------------------- */ --color-focus-ring: oklch(0.42 0.19 264 / 0.50); --color-overlay: oklch(0.14 0.025 264 / 0.55); /* ---------------------------------------------------------- Typography — Font Families ---------------------------------------------------------- */ --font-display: 'Cabinet Grotesk', system-ui, sans-serif; --font-body: 'Satoshi', system-ui, sans-serif; --font-mono: 'Cascadia Code', 'Fira Code', ui-monospace, monospace; /* ---------------------------------------------------------- Typography — Fluid Scale (clamp: min, preferred, max) Base: 375px min viewport, 1280px max viewport ---------------------------------------------------------- */ --text-xs: clamp(0.75rem, 0.70rem + 0.22vw, 0.875rem); /* 12–14px */ --text-sm: clamp(0.875rem, 0.82rem + 0.26vw, 1rem); /* 14–16px */ --text-base: clamp(1rem, 0.95rem + 0.26vw, 1.125rem); /* 16–18px */ --text-lg: clamp(1.125rem, 1.02rem + 0.52vw, 1.375rem); /* 18–22px */ --text-xl: clamp(1.375rem, 1.20rem + 0.87vw, 1.875rem); /* 22–30px */ --text-2xl: clamp(1.75rem, 1.45rem + 1.52vw, 2.625rem); /* 28–42px */ --text-3xl: clamp(2.25rem, 1.75rem + 2.61vw, 3.75rem); /* 36–60px */ /* ---------------------------------------------------------- Typography — Weights & Line Heights ---------------------------------------------------------- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.03em; --tracking-snug: -0.015em; --tracking-normal: 0em; --tracking-wide: 0.04em; /* ---------------------------------------------------------- Spacing Scale (4px base unit) --space-N = N × 4px ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ---------------------------------------------------------- Border Radius ---------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ---------------------------------------------------------- Shadows (color-tinted with indigo hue, no pure black) ---------------------------------------------------------- */ --shadow-xs: 0 1px 2px oklch(0.42 0.19 264 / 0.06); --shadow-sm: 0 1px 3px oklch(0.42 0.19 264 / 0.08), 0 1px 2px oklch(0.42 0.19 264 / 0.04); --shadow-md: 0 4px 6px oklch(0.42 0.19 264 / 0.07), 0 2px 4px oklch(0.42 0.19 264 / 0.05); --shadow-lg: 0 10px 15px oklch(0.42 0.19 264 / 0.08), 0 4px 6px oklch(0.42 0.19 264 / 0.04); --shadow-xl: 0 20px 25px oklch(0.42 0.19 264 / 0.09), 0 8px 10px oklch(0.42 0.19 264 / 0.04); /* ---------------------------------------------------------- Transitions ---------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 220ms ease; --transition-slow: 350ms ease; --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------- Container Widths ---------------------------------------------------------- */ --content-narrow: 640px; --content-default: 1100px; --content-wide: 1280px; /* ---------------------------------------------------------- Layout ---------------------------------------------------------- */ --header-height: 68px; --section-padding-y: clamp(var(--space-12), 8vw, var(--space-24)); } /* ============================================================ DARK MODE Applied via [data-theme="dark"] on ============================================================ */ [data-theme="dark"] { /* Accent — slightly brighter for dark surfaces */ --color-accent: oklch(0.60 0.18 264); --color-accent-hover: oklch(0.68 0.16 264); --color-accent-subtle: oklch(0.22 0.06 264); --color-accent-muted: oklch(0.55 0.12 264); /* Surface (dark) */ --color-surface-1: oklch(0.11 0.015 264); /* Page background */ --color-surface-2: oklch(0.16 0.020 264); /* Card, panel */ --color-surface-3: oklch(0.21 0.025 264); /* Elevated card */ /* Text (dark) */ --color-text-1: oklch(0.94 0.006 264); /* Primary text */ --color-text-2: oklch(0.72 0.012 264); /* Secondary text */ --color-text-3: oklch(0.52 0.010 264); /* Tertiary/placeholder */ /* Border (darker) */ --color-border: oklch(from var(--color-text-1) l c h / 0.10); --color-border-strong: oklch(from var(--color-text-1) l c h / 0.20); /* Feedback (dark variants) */ --color-success: oklch(0.65 0.17 155); --color-success-bg: oklch(0.18 0.05 155); --color-error: oklch(0.65 0.20 25); --color-error-bg: oklch(0.18 0.05 25); --color-warning: oklch(0.75 0.16 75); --color-warning-bg: oklch(0.18 0.05 75); /* Interactive */ --color-focus-ring: oklch(0.60 0.18 264 / 0.55); --color-overlay: oklch(0.05 0.01 264 / 0.70); /* Shadows — more subtle in dark mode */ --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.25); --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.30), 0 1px 2px oklch(0 0 0 / 0.20); --shadow-md: 0 4px 6px oklch(0 0 0 / 0.28), 0 2px 4px oklch(0 0 0 / 0.18); --shadow-lg: 0 10px 15px oklch(0 0 0 / 0.32), 0 4px 6px oklch(0 0 0 / 0.20); --shadow-xl: 0 20px 25px oklch(0 0 0 / 0.36), 0 8px 10px oklch(0 0 0 / 0.22); }