/*
* Design tokens — shared by the admin panel and chat chrome (style.css,
* responsive.css). One semantic palette, two value sets: the default
* (light) values on :root, overridden under html[data-theme="dark"].
*
* A future palette/visual change should mean editing the values here,
* not searching-and-replacing hex codes across style.css. Loaded before
* style.css/responsive.css so var() lookups in those files resolve.
*/
:root {
/* Surfaces */
--color-bg: #F5F5FC;
--color-surface: #FFFFFF;
--color-surface-alt: #F9F9F9;
--color-surface-hover: #F1F4F5;
--color-border: #DDDDDD;
--color-border-strong: #C8CBD0;
/* Text */
--color-text: #19191C;
--color-text-heading: #393E46;
--color-text-muted: #555555;
/* Accent */
--color-accent: #00ADB5;
--color-accent-contrast: #FFFFFF;
--color-accent-selected: rgba(0, 173, 181, 0.3);
/* Much lower opacity than --color-accent-selected: for a background that has to sit
under many rows at once (e.g. a long unseen-notifications list) rather than mark one
active/selected item, so it doesn't turn the whole list into a solid color block. */
--color-accent-tint: rgba(0, 173, 181, 0.05);
/* Status */
--color-danger: #DC3545;
--color-danger-hover: #B92332;
--color-danger-surface: rgba(220, 53, 69, 0.1);
--color-danger-surface-subtle: rgba(220, 53, 69, 0.05);
--color-success: #28A745;
--color-success-hover: #1F8337;
--color-success-surface: rgba(40, 167, 69, 0.1);
--color-warning: #FFC107;
--color-warning-hover: #E0A800;
--color-warning-surface: rgba(255, 193, 7, 0.14);
--color-info: #1976D2;
--color-info-hover: #125DA6;
--color-info-surface: #EAF4FD;
--color-neutral-action: #6C757D;
--color-neutral-action-hover: #545B62;
--color-purple: #7E57A3;
--color-online: #28A745;
/* Highlight (e.g. a pinned message sitting inline in a chat thread) */
--color-highlight-bg: #FEF9EC;
--color-highlight-label: rgba(0, 0, 0, 0.6);
/* Shape */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-pill: 999px;
/*
* Elevation. Keep these compact: large blurred shadows cost more to paint and
* made the old template feel heavier. Component CSS should use these complete
* shadow values instead of declaring its own rgba() shadow.
*/
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
--shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
--shadow-sidebar: 8px 0 28px rgba(15, 23, 42, 0.08);
--shadow-sticky: -6px 0 10px -8px rgba(15, 23, 42, 0.45);
--shadow-inset: inset 0 0 6px rgba(15, 23, 42, 0.24);
--shadow-strong: 0 4px 14px rgba(15, 23, 42, 0.22);
--shadow-accent-ring: 0 0 0 2px rgba(0, 173, 181, 0.24);
--shadow-focus: 0 0 0 3px rgba(0, 173, 181, 0.18);
--shadow-info-focus: 0 0 0 3px rgba(25, 118, 210, 0.18);
--shadow-message-edge: 0 -10px 20px rgba(18, 67, 105, 0.04);
/*
* Fixed brand-chrome colors — deliberately NOT redeclared under
* html[data-theme="dark"] below, so they stay constant in both themes.
* Several buttons/badges/pills (e.g. the active sidebar nav item, table
* header bars) were always meant to look like a fixed dark navy pill with
* light text, in both themes — not a themed surface that inverts. Using
* --color-bg/--color-text-heading for these (their original hex values
* before tokenization: #F5F5FC and #393E46) was correct by coincidence in
* light mode but breaks in dark mode once those tokens flip. Use these
* two instead for any "fixed dark badge/bar + light text" component.
*/
--color-ink: #393E46;
--color-light-text: #F5F5FC;
/*
* Typography. Theme-invariant (neither typeface nor type size flips with
* color mode), so declared once here rather than duplicated below.
*
* --font-family-base is the single source of truth for the app's typeface
* — style.css's body/heading rules consume it via var() instead of
* hardcoding a font name, so swapping fonts app-wide means changing this
* one value (plus the Google Fonts weights, which live per-layout
* since there's no shared head partial — see DETAILS.md). Google Fonts
* serves Poppins only as static per-weight files, not a true variable
* font, so the tags list explicit weights rather than a range.
*/
--font-family-base: "Poppins", sans-serif;
/*
* Values chosen to match the sizes already most common across style.css
* (12/14px dominate), not invented numbers — so applying these tokens to
* existing elements is a labeling change, not a resize.
*/
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-base: 13px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--line-height-tight: 1.25;
--line-height-base: 1.5;
/* Spacing scale, 4px base. Theme-invariant. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
}
html[data-theme="dark"] {
/* Surfaces */
--color-bg: #16171C;
--color-surface: #1E1F26;
--color-surface-alt: #24252D;
--color-surface-hover: #2B2D36;
--color-border: #33343D;
--color-border-strong: #484A55;
/* Text */
--color-text: #E7E7EA;
--color-text-heading: #F5F5F7;
--color-text-muted: #A0A0AA;
/* Accent (slightly brighter so it still reads on dark surfaces) */
--color-accent: #16C2CB;
--color-accent-contrast: #0B0B0D;
--color-accent-selected: rgba(22, 194, 203, 0.28);
--color-accent-tint: rgba(22, 194, 203, 0.07);
/* Status */
--color-danger: #FF6B6B;
--color-danger-hover: #FF8585;
--color-danger-surface: rgba(255, 107, 107, 0.14);
--color-danger-surface-subtle: rgba(255, 107, 107, 0.08);
--color-success: #4CD37B;
--color-success-hover: #6CE092;
--color-success-surface: rgba(76, 211, 123, 0.14);
--color-warning: #FFD35C;
--color-warning-hover: #FFE081;
--color-warning-surface: rgba(255, 211, 92, 0.15);
--color-info: #64B5F6;
--color-info-hover: #90CAF9;
--color-info-surface: #1C3042;
--color-neutral-action: #858B94;
--color-neutral-action-hover: #A0A5AD;
--color-purple: #C49AE8;
--color-online: #4CD37B;
/* Highlight — muted dark amber instead of the light-mode cream, so it still
reads as "highlighted" against the dark surface without being a jarring
bright box; --color-text (already light in dark mode) stays readable on
it, so the message body itself needs no separate override. */
--color-highlight-bg: #3A2F1A;
--color-highlight-label: rgba(255, 255, 255, 0.65);
/* Elevation — dark surfaces need stronger, tighter shadows to read */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.34);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.46);
--shadow-sidebar: 8px 0 28px rgba(0, 0, 0, 0.38);
--shadow-sticky: -6px 0 10px -8px rgba(0, 0, 0, 0.8);
--shadow-inset: inset 0 0 6px rgba(0, 0, 0, 0.5);
--shadow-strong: 0 4px 14px rgba(0, 0, 0, 0.52);
--shadow-accent-ring: 0 0 0 2px rgba(22, 194, 203, 0.3);
--shadow-focus: 0 0 0 3px rgba(22, 194, 203, 0.22);
--shadow-info-focus: 0 0 0 3px rgba(100, 181, 246, 0.22);
--shadow-message-edge: 0 -10px 20px rgba(0, 0, 0, 0.18);
}
/* Header dark-mode toggle */
.theme_switch {
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 6px 0 14px;
background: var(--color-surface);
/* --color-border reads as nearly invisible against --color-bg (the header's own
background) in both themes — --color-border-strong gives the pill a real edge so it
doesn't blend into the header at a glance. */
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-xs);
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
box-sizing: border-box;
}
.theme_switch:hover {
border-color: var(--color-accent);
box-shadow: var(--shadow-sm);
}
.theme_switch_label {
font-size: 13px;
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
}
.theme_switch_label-dark {
display: none;
}
html[data-theme="dark"] .theme_switch_label-light {
display: none;
}
html[data-theme="dark"] .theme_switch_label-dark {
display: inline;
}
.theme_switch_track {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 54px;
height: 26px;
/* --color-surface-alt sits almost the same lightness as the thumb's --color-surface in
both themes (e.g. #F9F9F9 vs #FFFFFF), so the "groove" the thumb slides in barely read
as a distinct shape. --color-border-strong is a real step darker/more defined in both
themes, so the track itself reads as a groove the (shadowed, so it visibly "sits above"
the track) thumb slides in, not a flat icon row. */
background: var(--color-border-strong);
border-radius: var(--radius-pill);
padding: 3px;
flex-shrink: 0;
}
.theme_switch_thumb {
position: absolute;
top: 3px;
left: 3px;
/* !important: found while investigating an unrelated icon-size report — this thumb was
rendering at 0 width (fully invisible, at every viewport width, confirmed via a
zoomed screenshot showing no circle behind the icons at all) despite this being the
only rule in the whole app that sets its width, with no competing selector of any
specificity found via a full stylesheet scan (including inside @media blocks).
Forcing it is a known-working fix confirmed live; the underlying cause of the
unstyled 0-width default wasn't identified and may be worth a deeper look later. */
width: 20px !important;
height: 20px;
border-radius: 50%;
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: transform .2s ease;
}
html[data-theme="dark"] .theme_switch_thumb {
/* Track is 54px with 3px padding each side (48px inner) and two 20px icons spaced via
space-between, so the moon icon starts at 28px from where the sun icon starts — not
26px, which left the thumb (and therefore the icon inside it) 2px off-center. */
transform: translateX(28px);
}
.theme_switch_icon {
/* Positioned directly against the track rather than centered via flex space-between:
the icon (a bare FontAwesome