/* ═════════════════════════════════════════════════════════════════════════ SunMonitor — Design Tokens Fundament voor de visuele refresh (Fase 0). Geïnspireerd op Solar Admin Bootstrap template, aangepast aan SunMonitor: - Sun-orange brand BEHOUDEN - Sky-blue voor info/data BEHOUDEN - Warm wit BEHOUDEN - Uitgebreid gray-scale + frissere success/danger uit het template Importeren VÓÓR style.css zodat legacy overrides voorrang houden. ═════════════════════════════════════════════════════════════════════════ */ :root { /* ─────────────────────────────────────────────────────────────────── KLEUREN — Brand ─────────────────────────────────────────────────────────────────── */ --color-brand: #d97706; /* sun-orange */ --color-brand-active: #b45309; --color-brand-soft: #fffbeb; /* zeer lichte tint voor hover/bg */ /* ─────────────────────────────────────────────────────────────────── KLEUREN — Status (uitgebreid uit template, getuned op SunMonitor) ─────────────────────────────────────────────────────────────────── */ --color-success: #10b981; --color-success-active: #059669; --color-success-soft: #defded; --color-danger: #ef4444; --color-danger-active: #dc2626; --color-danger-soft: #fee2e2; --color-warning: #f59e0b; --color-warning-active: #d97706; --color-warning-soft: #fef3c7; --color-info: #0ea5e9; /* sky → info bij data/grafieken */ --color-info-active: #0369a1; --color-info-soft: #e0f2fe; /* ─────────────────────────────────────────────────────────────────── KLEUREN — Neutral 9-step gray scale (uit template) 50 = lichtste achtergrond, 900 = donkerste tekst ─────────────────────────────────────────────────────────────────── */ --color-gray-50: #f8f7f4; /* warm wit page-bg (huidig) */ --color-gray-100: #f0ede7; /* card-bg (huidig) */ --color-gray-200: #e4dfd6; /* border-light (huidig) */ --color-gray-300: #c8c0b3; /* border-default */ --color-gray-400: #a09890; /* muted text (huidig --ink3) */ --color-gray-500: #756f66; /* secondary text */ --color-gray-600: #4a4540; /* primary text dim (huidig --ink2) */ --color-gray-700: #2d2924; /* primary text */ --color-gray-800: #1f1c17; /* heading */ --color-gray-900: #18160f; /* darkest (huidig --ink) */ /* ─────────────────────────────────────────────────────────────────── KLEUREN — Surface (achtergrond rollen) ─────────────────────────────────────────────────────────────────── */ --surface-page: var(--color-gray-50); --surface-card: #ffffff; --surface-elevated: #ffffff; --surface-muted: var(--color-gray-100); --surface-overlay: rgba(24, 22, 15, 0.6); /* ─────────────────────────────────────────────────────────────────── KLEUREN — Text rollen ─────────────────────────────────────────────────────────────────── */ --text-primary: var(--color-gray-900); --text-secondary: var(--color-gray-600); --text-muted: var(--color-gray-400); --text-on-brand: #ffffff; --text-link: var(--color-brand); --text-link-hover: var(--color-brand-active); /* ─────────────────────────────────────────────────────────────────── KLEUREN — Logo (behouden) ─────────────────────────────────────────────────────────────────── */ --color-logo-yellow: #f5c842; --color-logo-coral: #f0814a; /* ─────────────────────────────────────────────────────────────────── TYPOGRAPHY — Font families ─────────────────────────────────────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Consolas, monospace; --font-display: 'Syne', 'Inter', sans-serif; /* ─────────────────────────────────────────────────────────────────── TYPOGRAPHY — Font-size schaal (16-step, base = 14px) Eenheid: rem (1rem = 14px op huidige html font-size 10px x 1.4) Note: huidige html{font-size:10px} blijft, dus rem-waarden zijn herschaald. ─────────────────────────────────────────────────────────────────── */ --fs-9: 9px; /* micro labels (badges, super-mono) */ --fs-10: 10px; /* small labels (legacy default body) */ --fs-11: 11px; /* small body */ --fs-12: 12px; /* secondary body */ --fs-14: 14px; /* body (Solar Admin default) */ --fs-16: 16px; /* large body */ --fs-18: 18px; /* small heading */ --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; /* h3 */ --fs-28: 28px; /* h2 */ --fs-32: 32px; /* h1 */ --fs-40: 40px; /* hero number (KPI tegel value) */ --fs-48: 48px; --fs-56: 56px; --fs-64: 64px; /* Font-weights */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Line-heights */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.65; /* ─────────────────────────────────────────────────────────────────── SPACING — 8px grid (Solar Admin gebruikt 1rem=14, wij blijven op 8) ─────────────────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; /* basis */ --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-10: 32px; --space-12: 40px; --space-14: 48px; --space-16: 56px; --space-20: 72px; --space-24: 96px; /* ─────────────────────────────────────────────────────────────────── RADIUS — Behoud huidige rondheid (moderner dan template's 5px) ─────────────────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* card default (huidig --r) */ --radius-xl: 16px; /* large card (huidig --r-lg) */ --radius-2xl: 24px; --radius-full: 9999px; --radius-circle: 50%; /* ─────────────────────────────────────────────────────────────────── SHADOW — Subtieler dan huidige, multi-layer ─────────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(24, 22, 15, 0.04); --shadow-sm: 0 1px 3px rgba(24, 22, 15, 0.06), 0 1px 2px rgba(24, 22, 15, 0.04); --shadow-md: 0 4px 6px rgba(24, 22, 15, 0.05), 0 2px 4px rgba(24, 22, 15, 0.04); --shadow-lg: 0 12px 24px rgba(24, 22, 15, 0.08), 0 4px 8px rgba(24, 22, 15, 0.05); --shadow-xl: 0 24px 48px rgba(24, 22, 15, 0.10), 0 12px 24px rgba(24, 22, 15, 0.06); --shadow-focus-brand: 0 0 0 3px rgba(217, 119, 6, 0.20); --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.20); /* ─────────────────────────────────────────────────────────────────── LAYOUT — Sidebar, header, content ─────────────────────────────────────────────────────────────────── */ --layout-sidebar-w: 270px; /* iets breder dan huidig */ --layout-sidebar-w-mini: 60px; --layout-header-h: 64px; --layout-content-pad: 24px; --layout-card-pad: 16px; --layout-grid-gap: 16px; /* ─────────────────────────────────────────────────────────────────── Z-INDEX schaal — Voorkomt magic numbers ─────────────────────────────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-sidebar: 400; --z-modal-backdrop: 500; --z-modal: 501; --z-toast: 700; --z-tooltip: 800; /* ─────────────────────────────────────────────────────────────────── TRANSITIONS — Consistente timings ─────────────────────────────────────────────────────────────────── */ --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); /* ─────────────────────────────────────────────────────────────────── BREAKPOINTS — Voor JS gebruik (CSS gebruikt @media) ─────────────────────────────────────────────────────────────────── */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; } /* ═════════════════════════════════════════════════════════════════════════ LEGACY ALIASES — Oude variabelen blijven werken zonder wijziging. style.css definieert deze nog steeds in :root, dus deze aliassen worden alleen gebruikt door NIEUWE componenten die ze van tokens.css verwachten. Bij volle migratie kunnen deze later geconsolideerd worden. ═════════════════════════════════════════════════════════════════════════ */ :root { /* Backwards-compat: nieuwe tokens herbruikbaar onder oude namen. Wordt overschreven door style.css :root - dit is alleen fallback. */ --color-primary: var(--color-brand); --color-primary-active: var(--color-brand-active); --color-primary-soft: var(--color-brand-soft); } /* ═════════════════════════════════════════════════════════════════════════ DARK MODE — Voorbereid maar niet geactiveerd. Activeer later met: of prefers-color-scheme. ═════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --surface-page: #0f0d09; --surface-card: #1a1812; --surface-elevated: #221f17; --surface-muted: #15130d; --surface-overlay: rgba(0, 0, 0, 0.7); --text-primary: #f8f7f4; --text-secondary: #c8c0b3; --text-muted: #756f66; --color-gray-50: #1a1812; --color-gray-100: #221f17; --color-gray-200: #2d2924; --color-gray-300: #4a4540; --color-gray-400: #756f66; --color-gray-500: #a09890; --color-gray-600: #c8c0b3; --color-gray-700: #e4dfd6; --color-gray-800: #f0ede7; --color-gray-900: #f8f7f4; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.7); }