/* ============================================================ CMMS Foundry Design Token System v1.0 Enterprise UI foundation — all visual primitives ============================================================ Usage: import via Vite: @import 'cmms-foundry/tokens.css'; or linked directly in layouts/app.blade.php Rules: - No hardcoded colors in components — use these tokens ONLY - Theme switching via data-cmms-theme attribute on - WCAG AA compliant contrast ratios ========================================================= */ /* ── Font Family ───────────────────────────────── */ :root { --cmms-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --cmms-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace; } /* ── Font Sizes ───────────────────────────────── */ :root { --cmms-font-xs: 0.6875rem; /* 11px — badges, metadata */ --cmms-font-sm: 0.8125rem; /* 13px — table cells */ --cmms-font-base: 0.875rem; /* 14px — body text, forms */ --cmms-font-md: 1rem; /* 16px — card titles */ --cmms-font-lg: 1.125rem; /* 18px — page title */ --cmms-font-xl: 1.5rem; /* 24px — KPI value */ --cmms-font-2xl: 1.75rem; /* 28px — dashboard hero */ } /* ── Font Weights ──────────────────────────────── */ :root { --cmms-font-normal: 400; --cmms-font-medium: 500; --cmms-font-semibold: 600; --cmms-font-bold: 700; } /* ── Spacing (8px grid) ────────────────────────── */ :root { --cmms-space-xs: 0.25rem; /* 4px — icon padding */ --cmms-space-sm: 0.5rem; /* 8px — inline gap */ --cmms-space-md: 0.75rem; /* 12px — card internal padding */ --cmms-space-lg: 1rem; /* 16px — section gap */ --cmms-space-xl: 1.25rem; /* 20px — card gutter */ --cmms-space-2xl: 1.5rem; /* 24px — page section */ --cmms-space-3xl: 2rem; /* 32px — page margin */ --cmms-space-4xl: 3rem; /* 48px — layout spacing */ } /* ── Border Radius ──────────────────────────────── */ :root { --cmms-radius-sm: 4px; /* badges, small inputs */ --cmms-radius-md: 8px; /* cards, buttons, modals */ --cmms-radius-lg: 12px; /* dashboard cards */ --cmms-radius-full: 9999px; /* pills, avatars */ } /* ── Shadows ────────────────────────────────────── */ :root { --cmms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --cmms-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --cmms-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12); } /* ── Transitions ───────────────────────────────── */ :root { --cmms-transition-fast: 150ms ease; --cmms-transition-base: 200ms ease; --cmms-transition-slow: 300ms ease; } /* ── Z-Index Scale ─────────────────────────────── */ :root { --cmms-z-dropdown: 1000; --cmms-z-sticky: 1020; --cmms-z-modal: 1050; --cmms-z-toast: 1060; }