/* ================================================================ THEME TOKENS — light / dark ---------------------------------------------------------------- Loaded FIRST, before app.css / companies.css / activity-log.css. The active theme is set by an inline script in that writes data-theme="light|dark" onto before any stylesheet paints, so there is no white flash on load. Rules for anyone editing the stylesheets: • Never write a raw colour in app.css / companies.css / module styles. Use a token from this file. • Light values here are the colours the platform already shipped. Near-identical neutrals were unified into one token (e.g. #e5e7eb / #e2e8f0 / #dfe6f4 all became --border) — the hue and brightness families were preserved. • Dark values are hand-picked, not algorithmic inversions. ================================================================ */ :root, :root[data-theme="light"] { /* ── Brand (company identity — same in both themes) ── */ --company-primary: #1d6fa4; --company-primary-rgb: 29, 111, 164; --company-secondary: #155a87; --company-secondary-rgb: 21, 90, 135; --company-accent: #f59e0b; --company-primary-light: color-mix(in srgb, var(--company-primary) 12%, var(--surface-card)); --company-primary-mid: color-mix(in srgb, var(--company-primary) 28%, var(--surface-card)); /* Brand as used for text/borders — lightened in dark mode for contrast */ --brand: var(--company-primary); --brand-hover: var(--company-secondary); --brand-soft: var(--company-primary-light); /* ── Page & surfaces ── */ --surface-page: #f7fbff; --shell-gradient: linear-gradient(135deg, #eef4ff 0%, #f7fbff 52%, #edf4ff 100%); --surface-card: #ffffff; --surface-card-80: rgba(255, 255, 255, .78); --surface-card-86: rgba(255, 255, 255, .86); --surface-card-72: rgba(255, 255, 255, .72); --surface-raised: #f8fafc; /* absorbed #f9fafb #f8faff #f7f9fd */ --surface-muted: #f1f5f9; /* absorbed #f3f4f6 */ --surface-inset: #edf2fb; /* progress-bar troughs, chips */ --surface-hover: #f8fafc; /* row / ghost-button hover */ /* ── Text ── */ --text-strong: #111b3f; /* absorbed #101a3d #0f1839 #162247 #182347 */ --text-body: #374151; /* absorbed #334155 #25345e #27345f #475569 */ --text-muted: #6b7280; /* absorbed #64748b #61708f */ --text-faint: #9ca3af; /* absorbed #94a3b8 #8290af */ --text-on-brand:#ffffff; /* text sitting on a brand/solid fill — white in both themes */ /* ── Borders ── */ --border: #e5e7eb; /* absorbed #e2e8f0 #dfe6f4 */ --border-strong: #cbd5e1; /* absorbed #d1d5db */ --border-subtle: #edf1f7; /* absorbed #e6ebf5 #e1e8f4 #f1f5f9-as-border */ /* ── Accent (the dashboard blue — distinct from company brand) ── */ --accent: #2563eb; --accent-rgb: 37, 99, 235; --accent-fg: #1d4ed8; --accent-bg: #eef3ff; /* absorbed #eaf1ff #eef4ff #f3f7ff #eff6ff */ --accent-bg-strong: #dbeafe; --accent-border: #bfcfff; --accent-gradient: linear-gradient(135deg, #2563eb, #275df2); --accent-bg-gradient: linear-gradient(135deg, #eef4ff, #e8efff); /* ── Status ── */ --success: #16a34a; --success-alt: #059669; --success-bg: #f0fdf4; /* absorbed #dcfce7 #e8f8f1 #e6f8f0 */ --success-fg: #065f46; --danger: #dc2626; --danger-alt: #ef4444; --danger-bg: #fef2f2; --danger-fg: #991b1b; --danger-border: #fca5a5; --warning: #f59e0b; --warning-alt: #d97706; --warning-bg: #fff3e6; /* absorbed #fffbeb */ --warning-fg: #92400e; --info: #2563eb; --info-bg: #eef2ff; --info-fg: #4f46e5; --violet: #7c3aed; --violet-alt: #8b5cf6; --violet-bg: #f5f3ff; --orange: #f97316; --orange-alt: #fb923c; --teal: #0faaa9; --teal-bg: #e5fbfa; /* ── Solid fills ── The status colours above are tuned to be READ on a surface, so they get lighter in the dark theme. These are the same roles used as a solid button/badge fill with white text on top: they must stay saturated in both themes or the white label stops clearing contrast. */ --success-solid: #22c55e; --success-solid-hover: #16a34a; --danger-solid: #ef4444; --danger-solid-hover: #dc2626; --warning-solid: #f59e0b; --warning-solid-hover: #d97706; --orange-solid: #f97316; --orange-solid-hover: #ea580c; --neutral-solid: #64748b; /* The accent used as a solid fill (count badges). --accent itself is lightened in the dark theme to stay readable AS text, which would leave a white badge label at 2.5:1. */ --accent-solid: #2563eb; /* Label colour for the amber fill. White clears contrast on the light amber only marginally and not at all on the darker one. */ --on-warning-solid: #ffffff; /* ── Categorical tag / avatar palette ── Pale chip backgrounds with a deep label on top. In the dark theme the pair inverts: a deep tinted background with a pale label. */ --tag-indigo-bg: #e0e7ff; --tag-indigo-fg: #4338ca; --tag-indigo-border: #c7d2fe; --tag-violet-bg: #ddd6fe; --tag-violet-fg: #6d28d9; --tag-violet-border: #ddd6fe; --tag-pink-bg: #fce7f3; --tag-pink-fg: #be185d; --tag-red-bg: #fecaca; --tag-red-fg: #991b1b; --tag-orange-bg: #fed7aa; --tag-orange-fg: #c2410c; --tag-orange-border: #fed7aa; --tag-yellow-bg: #fde68a; --tag-yellow-fg: #a16207; --tag-yellow-border: #fde68a; --tag-green-bg: #bbf7d0; --tag-green-fg: #15803d; --tag-green-border: #86efac; --tag-teal-bg: #a7f3d0; --tag-teal-fg: #0f766e; --tag-teal-border: #a7f3d0; --tag-emerald-bg: #d1fae5; --tag-emerald-fg: #065f46; --tag-emerald-border: #6ee7b7; --tag-sky-bg: #e0f2fe; --tag-sky-fg: #0369a1; --tag-sky-border: #bae6fd; --tag-sky-soft: #f0f9ff; --tag-indigo: #6366f1; /* solid indigo accent (plan card top rules) */ --tag-amber-border: #fcd34d; --tag-blue-border: #93c5fd; --tag-yellow-soft: #fef9c3; --tag-cyan-bg: #cffafe; --tag-cyan-fg: #0891b2; --tag-indigo-soft: #eff0ff; --tag-indigo-mid: #a5b4fc; /* ── Dashboard tone palette ── The named pairs the super-admin and company dashboards share for their stat and activity icon tiles (a pale tile with a saturated glyph). */ --tone-indigo-bg: #eef2ff; --tone-indigo-fg: #4f46e5; --tone-blue-bg: #eff6ff; --tone-blue-fg: #2563eb; --tone-green-bg: #f0fdf4; --tone-green-fg: #22c55e; --tone-amber-bg: #fff7ed; --tone-amber-fg: #f97316; --tone-violet-bg: #faf5ff; --tone-violet-fg: #a855f7; --tone-red-bg: #fef2f2; --tone-red-fg: #ef4444; /* ── Shadows ── */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow-md: 0 12px 26px rgba(31, 54, 95, .06); --shadow-card: 0 16px 38px rgba(31, 54, 95, .07); --shadow-lg: 0 24px 70px rgba(31, 54, 95, .12); --shadow-pop: 0 10px 30px rgba(31, 54, 95, .14), 0 2px 8px rgba(31, 54, 95, .06); /* ── Sidebar (already dark in the light theme — kept as-is) ── */ --sidebar-gradient: radial-gradient(circle at 25% 8%, rgba(43, 108, 255, .38), transparent 26%), linear-gradient(180deg, #111d43 0%, #0d1a3c 58%, #0b1734 100%); --sidebar-shadow: inset 1px 0 rgba(255, 255, 255, .08), 0 28px 70px rgba(10, 23, 52, .24); --sidebar-notch: #0d1a3c; /* the colour a badge ring punches out of the sidebar */ /* ── Chart.js palette (read by JS via getComputedStyle) ── The categorical slots are not free-hand picks: each set was run through a contrast/colour-vision validator against the surface it sits on (--surface-card, white here and #151d31 in the dark theme) and checked for lightness, chroma, adjacent-pair separation under protanopia/deuteranopia/tritanopia, and 3:1 against that surface. Re-run the check before substituting any of them. */ --chart-grid: #edf1f7; --chart-label: #6b7280; --chart-series: #2563eb; /* the single-series growth line */ --chart-s1: #4f46e5; --chart-s2: #0d9488; --chart-s3: #d97706; --chart-s4: #db2777; --chart-s-other: #6b7280; /* the folded "other" slice — deliberately mute */ color-scheme: light; } :root[data-theme="dark"] { --company-primary-light: color-mix(in srgb, var(--company-primary) 26%, var(--surface-card)); --company-primary-mid: color-mix(in srgb, var(--company-primary) 42%, var(--surface-card)); /* #1d6fa4 on a near-black surface fails contrast — lift it */ --brand: color-mix(in srgb, var(--company-primary) 58%, #ffffff); /* In the dark theme a hover goes lighter, not darker, so --brand-hover sits above --brand rather than below it. */ --brand-hover: color-mix(in srgb, var(--company-primary) 38%, #ffffff); --brand-soft: color-mix(in srgb, var(--company-primary) 24%, #0d1220); --surface-page: #0d1220; --shell-gradient: linear-gradient(135deg, #0b1020 0%, #0d1220 52%, #0a1122 100%); --surface-card: #151d31; --surface-card-80: rgba(21, 29, 49, .84); --surface-card-86: rgba(21, 29, 49, .9); --surface-card-72: rgba(21, 29, 49, .76); --surface-raised: #1b2438; --surface-muted: #202a41; --surface-inset: #232e48; --surface-hover: #232e46; /* lighter than the card, not darker */ --text-strong: #f1f5fb; --text-body: #cbd5e1; --text-muted: #94a3b8; --text-faint: #6d7c96; --text-on-brand:#ffffff; --border: #2a3550; --border-strong: #3a4767; --border-subtle: #212b42; --accent: #60a5fa; --accent-rgb: 96, 165, 250; --accent-fg: #93c5fd; --accent-bg: #16233d; --accent-bg-strong: #1d3159; --accent-border: #2f4a7a; /* Kept saturated so white button text still clears contrast */ --accent-gradient: linear-gradient(135deg, #2d6ae4, #3a6ef0); --accent-bg-gradient: linear-gradient(135deg, #16233d, #1a2745); --success: #34d399; --success-alt: #34d399; --success-bg: #0e2a20; --success-fg: #6ee7b7; --danger: #f87171; --danger-alt: #f87171; --danger-bg: #2c1418; --danger-fg: #fca5a5; --danger-border: #7f3034; --warning: #fbbf24; --warning-alt: #fbbf24; --warning-bg: #2b2008; --warning-fg: #fcd34d; --info: #60a5fa; --info-bg: #10203c; --info-fg: #93c5fd; --violet: #a78bfa; --violet-alt: #a78bfa; --violet-bg: #201a3a; --orange: #fb923c; --orange-alt: #fdba74; --teal: #2dd4bf; --teal-bg: #0d2b2b; /* Nudged down a touch so they do not glare against a near-black page, while still carrying white text at 4.5:1 or better. */ --success-solid: #1ea856; --success-solid-hover: #17904a; --danger-solid: #e04343; --danger-solid-hover: #c93636; --warning-solid: #d18908; --warning-solid-hover: #b57407; --orange-solid: #e2670f; --orange-solid-hover: #c9560c; --neutral-solid: #55647c; --accent-solid: #2f6feb; --on-warning-solid: #241802; --tag-indigo-bg: #232748; --tag-indigo-fg: #a5b4fc; --tag-indigo-border: #343a63; --tag-violet-bg: #2a2148; --tag-violet-fg: #c4b5fd; --tag-violet-border: #3b2f63; --tag-pink-bg: #3a1528; --tag-pink-fg: #f9a8d4; --tag-red-bg: #3a1618; --tag-red-fg: #fca5a5; --tag-orange-bg: #3a2210; --tag-orange-fg: #fdba74; --tag-orange-border: #543215; --tag-yellow-bg: #362a0c; --tag-yellow-fg: #fcd34d; --tag-yellow-border: #4d3c11; --tag-green-bg: #10301d; --tag-green-fg: #86efac; --tag-green-border: #1c4a2d; --tag-teal-bg: #0d2f2b; --tag-teal-fg: #5eead4; --tag-teal-border: #14463f; --tag-emerald-bg: #0e2a20; --tag-emerald-fg: #6ee7b7; --tag-emerald-border: #17503a; --tag-sky-bg: #10273c; --tag-sky-fg: #7dd3fc; --tag-sky-border: #1c3d5c; --tag-sky-soft: #0f2236; --tag-indigo: #818cf8; --tag-amber-border: #6b530f; --tag-blue-border: #2f5c9c; --tag-yellow-soft: #2e2408; --tag-cyan-bg: #0b2b33; --tag-cyan-fg: #67e8f9; --tag-indigo-soft: #171d38; --tag-indigo-mid: #6272c4; --tone-indigo-bg: #1d2142; --tone-indigo-fg: #a5b4fc; --tone-blue-bg: #16233d; --tone-blue-fg: #7dabfb; --tone-green-bg: #0f2c1d; --tone-green-fg: #4ade80; --tone-amber-bg: #32200e; --tone-amber-fg: #fb923c; --tone-violet-bg: #251b3c; --tone-violet-fg: #c084fc; --tone-red-bg: #331519; --tone-red-fg: #f87171; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 12px 26px rgba(0, 0, 0, .35); --shadow-card: 0 16px 38px rgba(0, 0, 0, .4); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .5); --shadow-pop: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4); --sidebar-gradient: radial-gradient(circle at 25% 8%, rgba(43, 108, 255, .22), transparent 26%), linear-gradient(180deg, #0c1428 0%, #0a1124 58%, #080e1e 100%); --sidebar-shadow: inset 1px 0 rgba(255, 255, 255, .05), 0 28px 70px rgba(0, 0, 0, .45); --sidebar-notch: #0a1124; /* Stepped for the dark card, not flipped from the light values: the light steps sit at the wrong lightness on #151d31 and two of them drop under 3:1 there. Same validator, dark surface. */ --chart-grid: #2a3550; --chart-label: #94a3b8; --chart-series: #60a5fa; --chart-s1: #6366f1; --chart-s2: #0d9488; --chart-s3: #d97706; --chart-s4: #ec4899; --chart-s-other: #94a3b8; /* Native scrollbars, form controls and the flatpickr time input follow suit */ color-scheme: dark; } /* ================================================================ Theme toggle control (sidebar) ================================================================ */ .theme-toggle__icon--light, .theme-toggle__icon--dark { display: none; } :root[data-theme-pref="light"] .theme-toggle__icon--light { display: block; } :root[data-theme-pref="dark"] .theme-toggle__icon--dark { display: block; } /* ================================================================ Print & PDF — always render light, whatever the screen theme is ================================================================ */ @media print { :root, :root[data-theme="dark"] { --surface-page: #ffffff; --shell-gradient: none; --surface-card: #ffffff; --surface-card-80: #ffffff; --surface-card-86: #ffffff; --surface-card-72: #ffffff; --surface-raised: #f8fafc; --surface-muted: #f1f5f9; --surface-inset: #edf2fb; --surface-hover: #f8fafc; --text-strong: #111b3f; --text-body: #374151; --text-muted: #6b7280; --text-faint: #9ca3af; --border: #e5e7eb; --border-strong: #cbd5e1; --border-subtle: #edf1f7; color-scheme: light; } }