/* ═══════════════════════════════════════════════════════════════ Coen Design System — Tokens (v2) Versie 2.1 — gebaseerd op Jugoo (PostAds), GA4-stijl, Geist font Laad dit bestand vóór base.css en components.css. Designprincipes (zie PRINCIPLES.md): - Warme cremé-achtergrond (#F4F2F0) i.p.v. koud wit - Google-stijl blauw als primair accent - Geist (Vercel) als hoofdfont op alle applicaties - Subtiele schaduwen, ruime spacing scale (4px-base) - GA4-stijl tekst-hiërarchie, Material Symbols Rounded iconen ═══════════════════════════════════════════════════════════════ */ :root { /* ── Neutrale tinten ────────────────────────────────────────── */ --creme: #F4F2F0; /* Warm off-white — primaire pagina-achtergrond */ --creme-dark: #E8E0D8; --wit: #FFFFFF; --zwart: #000000; --grijs: #4A4A4A; --grijs-licht: #8A8A8A; --grijs-50: #F4F2F0; --grijs-100: #eeeeee; --grijs-200: #dddddd; --grijs-300: #bbbbbb; --grijs-400: #888888; --grijs-500: #666666; --grijs-700: #333333; /* ── Tekst-hiërarchie (GA4-stijl) ──────────────────────────── */ --text-primary: #202124; /* Hoofdtekst, koppen — conform PRINCIPLES 2.4 */ --text-default: #3C4043; /* Body */ --text-secondary: #5F6368; /* Secundair, labels */ --text-tertiary: #80868B; /* Subtiel, meta-info */ --text-disabled: #9AA0A6; /* ── Accent-kleuren ────────────────────────────────────────── */ --oranje: #E87C2A; /* Warm accent (PostAds-orange) */ --oranje-hover: #D06B1F; --accent: #1A73E8; /* Primair Google-blauw — knoppen, links, active */ --accent-hover: #1557B0; --accent-light: #E8F0FE; /* ── Status-kleuren ────────────────────────────────────────── */ --groen: #7CB77B; --groen-light: #e8f5e8; --groen-action: #16a34a; /* Donkergroen — knoppen die iets nieuws aanmaken */ --groen-action-hover: #15803d; --geel: #E8B84A; --geel-light: #fdf6e3; --rood: #D4633A; --rood-light: #fde8e2; /* ── Surfaces / structuur ──────────────────────────────────── */ --app-bg: #F4F2F0; /* Page achtergrond */ --surface-alt: #F4F2F0; /* Alternerende rijen */ --divider-soft: #E8EAED; /* Subtiele scheidingslijnen */ /* ── Sidebar ─────────────────────────────────────────────────── Het menu van MijnCRM is de maat: neutrale tekst, een zachte pil als achtergrond voor hover en actief, en kleur alleen in het icoon. Geen blauwe tekst, geen balk aan de linkerkant. */ --sidebar-width: 240px; --sidebar-bg: #FFFFFF; --sidebar-text: var(--text-secondary); /* Inactief menu-item */ --sidebar-text-active: var(--text-primary); /* Hover en actief */ --sidebar-icon: var(--text-tertiary); /* Inactief icoon */ --sidebar-icon-active: var(--accent); /* Alleen het icoon krijgt kleur */ --sidebar-hover: #F2F1EF; --sidebar-active: #EAE8E5; --sidebar-border: #E8EAED; --sidebar-item-radius: 8px; --sidebar-item-gap: 8px; /* Ruimte links en rechts van de pil */ /* ── Radii ─────────────────────────────────────────────────── */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; /* ── Schaduwen ─────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow: 0 2px 8px rgba(0,0,0,0.1); --shadow-lg: 0 4px 16px rgba(0,0,0,0.12); --shadow-ga4: 0 1px 2px rgba(60,64,67,0.1), 0 1px 3px rgba(60,64,67,0.05); /* ── Typografie ────────────────────────────────────────────── */ --font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; --font-mono: 'Geist Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace; --fs-xs: 0.7rem; /* 11.2px — badges, pills, meta-info */ --fs-sm: 0.875rem; /* 14px — body, knoppen, inputs */ --fs-md: 1rem; /* 16px — sub-titels */ --fs-h4: 1rem; /* 16px — h4 */ --fs-h3: 1.125rem; /* 18px — h3 */ --fs-h2: 1.375rem; /* 22px — h2 */ --fs-h1: 1.75rem; /* 28px — h1 */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ── Spacing scale (4px-base) ──────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── Transities ────────────────────────────────────────────── */ --transition: 0.2s ease; --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; /* ── Surfaces (bg-lagen) ───────────────────────────────────── */ --surface: #FFFFFF; /* Card-achtergrond */ --surface-subtle: #FAF7F2; /* Iets warmer dan creme — alt-blokken in een card */ --surface-sunken: #EEEAE3; /* Verzonken / disabled / track */ /* ── Borders (MijnCRM-style kaders rondom kaarten) ─────────── */ --border-subtle: #E8EAED; /* Standaard kaart-border, identiek aan --divider-soft */ --border-strong: #DADCE0; /* Hover/active emphasis op kaarten */ /* ── Text-rol aanvullingen ─────────────────────────────────── */ --text-muted: #80868B; /* Subtiel — alias --text-tertiary */ --text-accent: #1A73E8; /* Link-tekst — alias --accent */ --text-inverse: #FFFFFF; /* Tekst op donkere achtergrond */ /* ── Status-paren (badge/alert/pill) ───────────────────────── */ --bg-success: #e8f5e8; --fg-success: #1e7a36; --bg-warning: #fdf6e3; --fg-warning: #8a6914; --bg-info: #E8F0FE; --fg-info: #1557B0; --bg-danger: #fde8e2; --fg-danger: #b8522e; /* ── Tints voor alert-borders ──────────────────────────────── */ --blue-100: #D2E3FC; --green-100: #C8E6CB; --amber-100: #FCE8B2; /* ── Danger als losse status ───────────────────────────────── */ --danger: #D4633A; /* Alias --rood */ /* ── Selection ─────────────────────────────────────────────── */ --accent-100: #E8F0FE; /* ── Component-maten ───────────────────────────────────────── */ --h-btn: 36px; --h-btn-sm: 28px; --h-btn-md: 36px; --h-btn-lg: 44px; --radius-btn: 8px; /* alias --radius */ --radius-card: 8px; /* alias --radius */ --radius-input: 8px; /* alias --radius */ --radius-badge: 4px; /* alias --radius-sm */ --h-input: 36px; /* gelijk aan --h-btn-md */ /* ── Z-index-schaal ────────────────────────────────────────── */ --z-sidebar: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* ── Focus / lijnhoogtes ───────────────────────────────────── */ --focus-ring: 0 0 0 3px rgba(26, 115, 232, 0.25); --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; /* lopende tekst die gelezen wordt: lead, prose */ /* ── Font alias (voor base.css refs) ───────────────────────── */ --font: var(--font-family); /* ── Extra typografie ──────────────────────────────────────── */ --fs-lg: 1.125rem; /* alias --fs-h3 */ --fs-2xl: 1.75rem; /* alias --fs-h1 */ /* ── Shadow medium ─────────────────────────────────────────── */ --shadow-md: 0 2px 8px rgba(0,0,0,0.08); /* ── Tekst-aliassen (korte namen, zelfde waarden) ──────────── */ --ink: var(--text-primary); --ink2: var(--text-secondary); --ink3: var(--text-tertiary); /* ── Extra tekstmaten ──────────────────────────────────────── */ --fs-2xs: 0.625rem; /* 10px — pillen en badges */ --fs-xl: 1.5rem; /* 24px — paginatitel */ /* ── Pillen, badges en tags ────────────────────────────────── */ /* Eén maat voor status, labels en types: klein, halfvet, 4px hoek. */ --pill-fs: var(--fs-2xs); --pill-px: 8px; --pill-py: 2px; --pill-fw: var(--fw-semi); --radius-pill: 4px; --badge-fs: var(--fs-2xs); --badge-px: 8px; --badge-py: 2px; --badge-fw: var(--fw-semi); --tag-fs: 0.6875rem; /* 11px */ --tag-px: 8px; --tag-py: 1px; --tag-fw: var(--fw-medium); --radius-tag: 4px; /* ── Glass (optioneel — voor apps met gradient-achtergrond) ── */ --glass-bg: rgba(255,255,255,0.7); --glass-border: rgba(255,255,255,0.35); --glass-blur: 20px; --glass-shadow: 0 8px 32px rgba(0,0,0,0.08); }