/* ============================================================ SmartOffice ESS – Theme Tokens Two themes: light (default) and dark. Switch by setting data-theme="dark" on . All component styles reference var(--token-name) only — never hardcode hex/rgb values in component CSS. ============================================================ */ /* ── LIGHT (default) ─────────────────────────────────────── */ :root, :root[data-theme="light"] { /* Brand */ --color-primary: #5b7cfa; --color-primary-hover: #4a6ae0; --color-primary-light: #eef2ff; --color-purple: #7c6af7; --color-purple-light: #ede9fe; /* Sidebar */ --sidebar-bg: #ffffff; --sidebar-text: #5a607a; --sidebar-text-active: #1a1a2e; --sidebar-active-bg: rgba(91,124,250,.10); --sidebar-active-border: #5b7cfa; --sidebar-label-color: #9ea8c0; --sidebar-hover-bg: rgba(91,124,250,.07); --sidebar-divider: #e5e8f0; --sidebar-help-bg: #f7f8fc; --sidebar-icon-color: #9ea8c0; --sidebar-shadow: 2px 0 10px rgba(0,0,0,.06); /* Surfaces & layout */ --body-bg: #f5f6fa; --surface: #ffffff; --surface-muted: #f7f8fc; --table-header-bg: #fafbfc; --border: #e5e8f0; --border-muted: #f0f2f8; /* Topbar */ --topbar-bg: #ffffff; --topbar-border: #e5e8f0; /* Text */ --text-primary: #1a1a2e; --text-heading: #1a1a2e; --text-secondary: #5a607a; --text-body: #3a3f5c; --text-muted: #9ea8c0; --text-label: #6b7a99; /* Semantic */ --success: #10b981; --success-light: #d1fae5; --success-text: #065f46; --warning: #f59e0b; --warning-light: #fef3c7; --warning-text: #92400e; --danger: #ef4444; --danger-light: #fee2e2; --danger-text: #991b1b; --info: #3b82f6; --info-light: #dbeafe; --info-text: #1e40af; --teal: #10b981; --amber: #f59e0b; /* Leave type pills */ --lp-sl-bg: #dbeafe; --lp-sl-text: #1d4ed8; --lp-lop-bg: #fee2e2; --lp-lop-text: #b91c1c; --lp-rho-bg: #ede9fe; --lp-rho-text: #6d28d9; --lp-al-bg: #d1fae5; --lp-al-text: #065f46; --lp-cl-bg: #fef3c7; --lp-cl-text: #92400e; --lp-co-bg: #ccfbf1; --lp-co-text: #0f766e; --lp-eo-bg: #fce7f3; --lp-eo-text: #9d174d; /* Form */ --input-bg: #ffffff; --input-border: #e5e8f0; --input-focus-border: #5b7cfa; --input-placeholder: #9ea8c0; /* Shadow */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.10); --shadow-primary: 0 2px 8px rgba(91,124,250,.20); /* Employee avatar palette (identity colors, same in both themes) */ --av-c1: #ef4444; --av-c2: #f97316; --av-c3: #8b5cf6; --av-c4: #3b82f6; --av-c5: #10b981; --av-c6: #ec4899; --av-c7: #06b6d4; --av-c8: #6366f1; } /* ── DARK ─────────────────────────────────────────────────── */ :root[data-theme="dark"] { /* Brand */ --color-primary: #7c97fb; --color-primary-hover: #6a87f0; --color-primary-light: #1E2848; --color-purple: #9d8df7; --color-purple-light: #22203C; /* Sidebar */ --sidebar-bg: #141727; --sidebar-text: rgba(255,255,255,.65); --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(124,151,251,.18); --sidebar-active-border: #7c97fb; --sidebar-label-color: rgba(255,255,255,.25); --sidebar-hover-bg: rgba(255,255,255,.07); --sidebar-divider: rgba(255,255,255,.08); --sidebar-help-bg: rgba(255,255,255,.05); --sidebar-icon-color: rgba(255,255,255,.45); --sidebar-shadow: none; /* Surfaces & layout */ --body-bg: #1A1E2E; --surface: #1E2236; --surface-muted: #232840; --table-header-bg: #232840; --border: #2A3050; --border-muted: #222840; /* Topbar */ --topbar-bg: #1E2236; --topbar-border: #2A3050; /* Text */ --text-primary: #e6edf3; --text-heading: #e6edf3; --text-secondary: #8b949e; --text-body: #c9d1d9; --text-muted: #6e7681; --text-label: #8b949e; /* Semantic */ --success: #3fb950; --success-light: #0f2d14; --success-text: #3fb950; --warning: #d29922; --warning-light: #2d1f00; --warning-text: #d29922; --danger: #f85149; --danger-light: #2d1117; --danger-text: #f85149; --info: #58a6ff; --info-light: #0d2035; --info-text: #58a6ff; --teal: #3fb950; --amber: #d29922; /* Leave type pills */ --lp-sl-bg: #0d2035; --lp-sl-text: #58a6ff; --lp-lop-bg: #2d1117; --lp-lop-text: #f85149; --lp-rho-bg: #1e1a3a; --lp-rho-text: #9d8df7; --lp-al-bg: #0f2d14; --lp-al-text: #3fb950; --lp-cl-bg: #2d1f00; --lp-cl-text: #d29922; --lp-co-bg: #0c2926; --lp-co-text: #2dd4bf; --lp-eo-bg: #2d1929; --lp-eo-text: #f472b6; /* Form */ --input-bg: #232840; --input-border: #2A3050; --input-focus-border: #7c97fb; --input-placeholder: #6e7681; /* Shadow */ --shadow-sm: 0 1px 3px rgba(0,0,0,.30); --shadow-md: 0 4px 12px rgba(0,0,0,.40); --shadow-primary: 0 2px 8px rgba(124,151,251,.25); }