/* ══════════════════════════════════════════════════════════ IT Enterprise Design System — Tokens /opt/shared-ui/static/tokens.css Source of truth for colours, spacing, layout, typography, tap-target sizes. Loaded BEFORE components.css. ══════════════════════════════════════════════════════════ */ :root { /* ── Surfaces (dark mode default — matches existing apps) ── */ --bg: #0d1117; --surface: #161b22; --surface2: #1c2128; --border: #30363d; /* ── Text ── */ --text: #e6edf3; --text2: #8b949e; --text3: #484f58; /* ── Accent palette ── */ --green: #3fb950; --red: #f85149; --yellow: #d29922; --blue: #58a6ff; --orange: #e3b341; --cyan: #38bdf8; --purple: #bc8cff; /* ── Layout ── */ --topbar-h: 48px; --sidebar-w: 260px; /* ── Radius ── */ --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 12px; /* ── Spacing scale ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* ── Tap targets — WCAG 2.5.5 demands ≥44px on touch ── */ --tap-min: 28px; /* desktop fine-pointer baseline */ --tap-min-touch: 44px; /* enforced on coarse pointers + ≤900px */ /* ── Typography ── */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', Consolas, monospace; /* ── Z-index scale ── */ --z-sidebar: 900; --z-topbar: 1000; --z-dropdown: 1100; --z-modal: 2000; --z-toast: 3000; --z-tooltip: 9999; } /* ── Light-mode override ── opt-in via or media-query ── */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --bg: #ffffff; --surface: #f6f8fa; --surface2: #eaeef2; --border: #d0d7de; --text: #1f2328; --text2: #57606a; --text3: #8c959f; } } :root[data-theme="light"] { --bg: #ffffff; --surface: #f6f8fa; --surface2: #eaeef2; --border: #d0d7de; --text: #1f2328; --text2: #57606a; --text3: #8c959f; } :root[data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface2: #1c2128; --border: #30363d; --text: #e6edf3; --text2: #8b949e; --text3: #484f58; } /* ── Touch-device tap-target enforcement ── */ @media (pointer: coarse), (max-width: 900px) { :root { --tap-min: var(--tap-min-touch); } }