/* ============================================================ VitaService — Design Tokens tokens.css · v1.0 · Juli 2026 Alle design tokens als CSS custom properties. NOOIT hard-coded waarden gebruiken in andere CSS-bestanden. Altijd var(--token-naam) gebruiken. ============================================================ */ :root { /* ── KLEUR: Achtergronden ─────────────────────────────── */ --color-bg-base: #09090B; /* zinc-950 — hoofdachtergrond */ --color-bg-surface: #111827; /* gray-900 — kaart/sectie */ --color-bg-elevated: #18181B; /* zinc-900 — verhoogd element */ --color-bg-overlay: #0F0F11; /* donkerder overlay */ --color-bg-hover: #1C1C1F; /* hover op donkere vlakken */ --color-bg-input: #18181B; /* formulier-inputs */ --color-bg-code: #0D0D0F; /* code-blokken */ /* ── KLEUR: Borders ──────────────────────────────────── */ --color-border: #1F2937; /* gray-800 — standaard border */ --color-border-muted: #111827; /* subtiele border */ --color-border-strong: #374151; /* gray-700 — nadruk border */ --color-border-focus: #C2410C; /* focus ring = accent */ /* ── KLEUR: Tekst ────────────────────────────────────── */ --color-text-primary: #FAFAFA; /* zinc-50 — hoofdtekst */ --color-text-secondary: #A1A1AA; /* zinc-400 — secundaire tekst */ --color-text-muted: #71717A; /* zinc-500 — gedempte tekst */ --color-text-subtle: #52525B; /* zinc-600 — labels, placeholders */ --color-text-inverse: #09090B; /* tekst op lichte achtergrond */ --color-text-link: #C2410C; /* links = accent */ --color-text-link-hover:#E05A1E; /* link hover */ /* ── KLEUR: Accent (Rust Orange) ─────────────────────── */ --color-accent: #C2410C; /* primair accent */ --color-accent-hover: #9A340A; /* darker hover */ --color-accent-light: #E05A1E; /* lighter variant */ --color-accent-muted: rgba(194, 65, 12, 0.12); /* subtiele bg */ --color-accent-border: rgba(194, 65, 12, 0.30); /* accent border */ /* ── KLEUR: Semantisch ───────────────────────────────── */ --color-success: #16A34A; --color-success-muted: rgba(22, 163, 74, 0.12); --color-success-border: rgba(22, 163, 74, 0.30); --color-warning: #D97706; --color-warning-muted: rgba(217, 119, 6, 0.12); --color-warning-border: rgba(217, 119, 6, 0.30); --color-error: #DC2626; --color-error-muted: rgba(220, 38, 38, 0.12); --color-error-border: rgba(220, 38, 38, 0.30); --color-info: #2563EB; --color-info-muted: rgba(37, 99, 235, 0.12); --color-info-border: rgba(37, 99, 235, 0.30); /* ── KLEUR: Brand Indigo ─────────────────────────────── */ --color-indigo: #1E3A5F; --color-indigo-muted: rgba(30, 58, 95, 0.20); /* ── TYPOGRAFIE: Font families ───────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace; /* ── TYPOGRAFIE: Groottes (type-scale 1.25 ratio) ────── */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* ── TYPOGRAFIE: Gewichten ───────────────────────────── */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ── TYPOGRAFIE: Line heights ────────────────────────── */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; --leading-loose: 2; /* ── TYPOGRAFIE: Letter spacing ─────────────────────── */ --tracking-tight: -0.025em; --tracking-snug: -0.015em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ── SPACING (8px grid) ─────────────────────────────── */ --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 */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ /* ── BORDER RADIUS ───────────────────────────────────── */ --radius-sm: 4px; /* tags, badges */ --radius-md: 6px; /* buttons, inputs */ --radius-lg: 8px; /* cards */ --radius-xl: 12px; /* grote kaarten */ --radius-2xl: 16px; /* modals */ --radius-3xl: 24px; /* grote blokken */ --radius-full: 9999px;/* pills, avatars */ /* ── SHADOWS ─────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4); --shadow-accent: 0 0 0 3px rgba(194, 65, 12, 0.35); --shadow-focus: 0 0 0 3px rgba(194, 65, 12, 0.50); /* ── TRANSITIONS ─────────────────────────────────────── */ --transition-fast: 150ms ease-out; --transition-base: 200ms ease-out; --transition-slow: 300ms ease-out; --transition-slower: 400ms ease-out; --transition-all: all var(--transition-base); /* ── Z-INDEX schaal ──────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ── LAYOUT: Container ───────────────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1400px; /* ── LAYOUT: Navigatie hoogte ────────────────────────── */ --nav-height-desktop: 72px; --nav-height-mobile: 64px; /* ── LAYOUT: Sectie padding ──────────────────────────── */ --section-padding-y: var(--space-24); /* 96px */ --section-padding-y-sm: var(--space-16); /* 64px */ --section-padding-x: var(--space-6); /* 24px */ /* ── GRADIENTS ───────────────────────────────────────── */ --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(194, 65, 12, 0.08) 0%, transparent 60%); --gradient-glow: radial-gradient(circle at 50% 50%, rgba(194, 65, 12, 0.06) 0%, transparent 70%); --gradient-fade-bottom: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%); --gradient-fade-top: linear-gradient(to top, transparent 0%, var(--color-bg-base) 100%); --gradient-card: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-elevated) 100%); --gradient-text: linear-gradient(135deg, #FAFAFA 0%, #A1A1AA 100%); /* ── MEDIA QUERY BREAKPOINTS (als token voor JS) ─────── */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; }