/* ============================================================================= tokens.css — HRIS shared design tokens NOTE: This is a v1 project. This file is NOT the v2-saas `theme.css` token contract (UI_GUIDELINES §4.5) — it is a lightweight DRY layer for the neutrals, motion, z-index scale and shared helpers that Bootstrap theming does not cover. Brand colour still flows through Bootstrap's --bs-primary, injected per company at runtime by ThemeStyleViewComponent. Load order: AFTER Bootstrap + ThemeStyle, BEFORE site.css / public-layout.css so those files can consume these tokens. ============================================================================= */ :root { /* ── Neutral "slate" ramp ── */ --hris-gray-50: #f8fafc; --hris-gray-100: #f1f5f9; --hris-gray-200: #e2e8f0; --hris-gray-300: #cbd5e1; --hris-gray-400: #94a3b8; --hris-gray-500: #64748b; --hris-gray-600: #475569; --hris-gray-700: #334155; --hris-gray-800: #1e293b; --hris-gray-900: #0f172a; /* ── Bootstrap-gray aliases ── */ --hris-bsgray-100: #f8f9fa; --hris-bsgray-150: #f1f3f5; --hris-bsgray-200: #e9ecef; --hris-bsgray-300: #dee2e6; --hris-bsgray-500: #adb5bd; --hris-bsgray-600: #868e96; --hris-bsgray-700: #6c757d; --hris-bsgray-800: #495057; --hris-bsgray-900: #343a40; /* ── Semantic surfaces / text / borders ── */ --hris-surface: #fff; --hris-surface-muted: #f8f9fa; --hris-border: #e9ecef; --hris-text: #212529; --hris-text-muted: #6c757d; /* ── Sidebar — LIGHT MODE ── */ --hris-sidebar-bg: #fff; --hris-sidebar-bg-brand: var(--hris-surface-muted); --hris-sidebar-text: var(--hris-bsgray-800); --hris-sidebar-text-hover: var(--hris-text); /* CODE_REVIEW_2026-08-02 L9: the rail went white (--hris-sidebar-bg: #fff) but these two kept the grays that were tuned for the old #212529 rail — 3.32:1 (muted) and 2.07:1 (faint) on white. Retuned for a light surface: muted #495057 = 8.18:1 on the rail / 7.76:1 on the #f8f9fa brand strip, faint #6c757d = 4.69:1. Both clear WCAG AA 4.5:1 for normal text. */ --hris-sidebar-text-muted: var(--hris-bsgray-800); --hris-sidebar-text-faint: var(--hris-bsgray-700); --hris-sidebar-border: var(--hris-border); --hris-sidebar-hover-bg: rgba(0, 0, 0, .05); --hris-sidebar-scrollbar-thumb: rgba(0, 0, 0, .15); --hris-sidebar-scrollbar-thumb-hover: rgba(0, 0, 0, .28); --hris-sidebar-flyout-bg: #fff; --hris-sidebar-flyout-border: var(--hris-border); /* ── Motion ── */ --anim-fast: .15s; --anim-base: .25s; --anim-slow: .45s; --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-smooth: cubic-bezier(.2, .8, .3, 1); /* Derived brand helpers */ --glow: color-mix(in srgb, var(--bs-primary) 35%, transparent); --surface: #f8f9fa; /* ── z-index scale ── */ --z-sidebar: 1020; --z-navbar: 1030; --z-fab: 1040; --z-search: 1050; --z-toast: 1080; --z-overlay: 2000; /* ── Bootstrap contrast tuning — LIGHT (mirrors Pentos theme.css §3) ── */ --bs-body-bg: var(--hris-gray-50); --bs-body-color: var(--hris-gray-800); --bs-border-color: var(--hris-gray-200); --bs-secondary-color: var(--hris-gray-600); --bs-tertiary-color: var(--hris-gray-500); --bs-emphasis-color: var(--hris-gray-900); --bs-heading-color: var(--hris-gray-900); --bs-tertiary-bg: var(--hris-gray-100); --bs-secondary-bg: var(--hris-gray-100); } /* ── Shared heart accent ── */ .text-heart { color: #e25555; } /* ── Small utilities ── */ .cursor-pointer { cursor: pointer; } .code-wrap { white-space: pre-wrap; word-wrap: break-word; } .dup-highlight-match { background-color: #cfe2ff; border-radius: 2px; } .dup-highlight-exact { background-color: #f8d7da; border-radius: 2px; } /* ============================================================================= DARK MODE — token overrides ============================================================================= */ [data-bs-theme="dark"] { --hris-gray-50: #0f172a; --hris-gray-100: #1e293b; --hris-gray-200: #334155; --hris-gray-300: #475569; --hris-gray-400: #64748b; --hris-gray-500: #94a3b8; --hris-gray-600: #cbd5e1; --hris-gray-700: #e2e8f0; --hris-gray-800: #f1f5f9; --hris-gray-900: #f8fafc; --hris-bsgray-100: #1e222a; --hris-bsgray-150: #242832; --hris-bsgray-200: #2d323d; --hris-bsgray-300: #3a4049; --hris-bsgray-500: #8891a0; --hris-bsgray-600: #a7afbb; --hris-bsgray-700: #c3c9d1; --hris-bsgray-800: #dfe2e7; --hris-bsgray-900: #f1f2f4; --hris-surface: #171b22; --hris-surface-muted: #1e222a; --hris-border: #2d323d; --hris-text: #e8eaed; --hris-text-muted: #a7afbb; --glow: color-mix(in srgb, var(--bs-primary) 45%, transparent); --surface: #1e222a; /* ── Sidebar — DARK MODE ── */ --hris-sidebar-bg: #12151b; --hris-sidebar-bg-brand: rgba(0, 0, 0, .25); --hris-sidebar-text: rgba(255, 255, 255, .82); --hris-sidebar-text-hover: #fff; /* CODE_REVIEW_2026-08-02 L9: .4/.32 on the #12151b rail were 3.83:1 / 2.90:1 — both below AA for the 0.68rem brand subtitle and the 0.6rem section labels. Raised to 7.51:1 / 6.15:1 while staying below --hris-sidebar-text (.82) so the three-tier hierarchy survives. */ --hris-sidebar-text-muted: rgba(255, 255, 255, .62); --hris-sidebar-text-faint: rgba(255, 255, 255, .55); --hris-sidebar-border: rgba(255, 255, 255, .06); --hris-sidebar-hover-bg: rgba(255, 255, 255, .06); --hris-sidebar-scrollbar-thumb: rgba(255, 255, 255, .1); --hris-sidebar-scrollbar-thumb-hover: rgba(255, 255, 255, .18); --hris-sidebar-flyout-bg: #1a1d24; --hris-sidebar-flyout-border: rgba(255, 255, 255, .07); /* ── Bootstrap contrast tuning — DARK (mirrors Pentos theme.css §4) ── */ --bs-body-bg: var(--hris-gray-50); --bs-body-color: var(--hris-gray-700); --bs-border-color: rgba(148, 163, 184, 0.18); --bs-secondary-color: var(--hris-gray-500); --bs-tertiary-color: var(--hris-gray-400); --bs-emphasis-color: #ffffff; --bs-heading-color: var(--hris-gray-800); --bs-tertiary-bg: var(--hris-gray-100); --bs-secondary-bg: var(--hris-gray-200); } /* Printing should always be light, regardless of the active theme */ @media print { html[data-bs-theme="dark"] { --bs-body-bg: #fff; --bs-body-color: #000; } }