/* =========================================================
BASE.CSS — Employee Monitoring System, Design System v3
Approved reference design (built in Claude Design), translated
into this project's real page structure.
Contains: design tokens (colors/spacing/radii/shadows), the CSS
reset, and base typography. Component styles (buttons, cards,
tables, navbar, etc.) live in components.css; page-specific
overrides live in pages.css. All three are loaded together via
tags in every dashboard page's , in that order.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
/* ---- Base surfaces ---- */
--color-bg: oklch(0.975 0.004 250);
--color-surface: oklch(1 0 0);
--color-surface-alt: oklch(0.98 0.003 260); /* table header rows */
--color-border: oklch(0.92 0.005 260);
--color-border-soft: oklch(0.94 0.004 260); /* row dividers */
--color-border-input: oklch(0.9 0.006 260);
/* ---- Text ---- */
--color-ink: oklch(0.2 0.015 260); /* headings */
--color-ink-soft: oklch(0.22 0.015 260);
--color-text: oklch(0.3 0.015 260); /* primary body/table text */
--color-text-secondary: oklch(0.4 0.015 260);
--color-muted: oklch(0.5 0.012 260); /* labels, secondary */
--color-muted-soft: oklch(0.55 0.012 260);
--color-placeholder: oklch(0.68 0.008 260);
/* ---- Accent (primary steel-blue) ---- */
--color-accent: oklch(0.47 0.09 255);
--color-accent-hover: oklch(0.41 0.09 255);
--color-accent-soft: oklch(0.93 0.03 255); /* light bg, e.g. avatar circles */
--color-accent-soft-text: oklch(0.4 0.09 255);
/* ---- Dark navbar ---- */
--color-navbar-bg: oklch(0.15 0.018 255);
--color-navbar-text: oklch(0.97 0.003 260);
--color-navbar-text-muted: oklch(0.68 0.015 258);
/* ---- Status: productive (green) ---- */
--color-success: oklch(0.62 0.14 152);
--color-success-text: oklch(0.38 0.1 152);
--color-success-soft: oklch(0.95 0.045 152);
/* ---- Status: unproductive (red) ---- */
--color-danger: oklch(0.6 0.19 25);
--color-danger-text: oklch(0.5 0.16 25);
--color-danger-soft: oklch(0.95 0.045 25);
/* ---- Status: neutral (gray-blue) ---- */
--color-neutral-dot: oklch(0.65 0.01 260);
--color-neutral-text: oklch(0.4 0.012 260);
--color-neutral-soft: oklch(0.94 0.006 260);
/* ---- Warning / notification banner (amber) ---- */
--color-warning: oklch(0.5 0.13 65);
--color-warning-text: oklch(0.42 0.12 65);
--color-warning-soft: oklch(0.96 0.045 80);
--color-warning-border: oklch(0.86 0.07 78);
/* ---- Rank medals (Rankings page) ---- */
--color-rank-gold: oklch(0.72 0.14 80);
--color-rank-silver: oklch(0.78 0.01 260);
--color-rank-bronze: oklch(0.64 0.1 45);
/* ---- Typography ---- */
--font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Manrope', var(--font-ui);
/* ---- Spacing scale (kept from the previous system - values, not
visual language, are unaffected by this redesign) ---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
/* ---- Radii ---- */
--radius-sm: 8px;
--radius-md: 9px;
--radius-lg: 14px;
--radius-xl: 16px; /* login card */
/* ---- Shadows (this design leans on borders more than shadows) ---- */
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.03);
--shadow-md: 0 4px 16px oklch(0 0 0 / 0.06);
--shadow-login: 0 24px 60px -12px oklch(0 0 0 / 0.5);
--transition: 150ms ease;
}
/* ---- Reset ---- */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* ---- Base typography ---- */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--color-ink);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
}
h1 { font-size: 24px; font-weight: 800; }
h2 { font-size: 22px; font-weight: 800; }
h3 { font-size: 16px; font-weight: 700; margin-bottom: var(--space-3); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
::selection { background: var(--color-accent); color: #fff; }
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* subtitle paragraphs right under an (inline color:#666 in the HTML) -
unify them to the design system's muted tone */
.container > p {
color: var(--color-muted) !important;
font-size: 13px;
margin-top: -12px;
margin-bottom: var(--space-4) !important;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-5) var(--space-4);
}
/* ---- Reduced motion — respected globally ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
html { scroll-behavior: smooth; }
@media (max-width: 720px) {
.container { padding: var(--space-3); }
}