/* ========================================================================== HELIOS — Fluent 2 design tokens (global, theme-aware) -------------------------------------------------------------------------- Single source of truth for the Fluent palette. Light values live in :root; the [data-bs-theme="dark"] block swaps ONLY colour / elevation tokens, so every component that references var(--fl-*) themes automatically — nothing in the component CSS changes (see docs/design.md "if you later need dark mode"). Brand is #0080d0, the implemented Global Turbine Asia logo blue (this supersedes design.md's #0f6cbd). The activation hook is Bootstrap-native `data-bs-theme` on , rendered server-side from the user's saved preference (users.theme) — so the first paint is already correct, no flash. Load order (master.blade.php): style.css -> custom.css -> THIS -> settings-fluent.css -> fluent-dark.css. ========================================================================== */ :root { /* Brand — reuse the app primary so sidebar/header stay cohesive */ --fl-brand: #0080d0; /* Global Turbine Asia logo blue (sampled from the wordmark) */ --fl-brand-hover: #0070ba; --fl-brand-pressed: #0063a3; --fl-brand-tint: #e4f3fb; /* Neutral surfaces — flat white canvas, like the Azure portal */ --fl-bg-canvas: #ffffff; --fl-bg-surface: #ffffff; --fl-bg-subtle: #f5f5f4; --fl-bg-hover: #f3f6fb; --fl-bg-band: #fafafa; /* SharePoint-style top header band */ /* Strokes */ --fl-stroke: #e1dfdd; --fl-stroke-strong: #d2d0ce; /* Foreground / text */ --fl-fg: #242424; --fl-fg-secondary: #605e5c; --fl-fg-disabled: #a19f9d; /* Status */ --fl-success: #0e700e; --fl-success-subtle: #dff6dd; --fl-danger: #c50f1f; --fl-danger-subtle: #fde7e9; --fl-warning: #835300; --fl-warning-subtle: #fff4ce; --fl-info: #0f548c; --fl-info-subtle: #eff6fc; /* Elevation */ --fl-shadow-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, .10), 0 0 0.0625rem rgba(0, 0, 0, .08); --fl-shadow-8: 0 0.25rem 0.5rem rgba(0, 0, 0, .10), 0 0 0.125rem rgba(0, 0, 0, .08); --fl-shadow-16: 0 0.5rem 1rem rgba(0, 0, 0, .12), 0 0 0.125rem rgba(0, 0, 0, .10); /* Radius */ --fl-radius-sm: 0.25rem; --fl-radius-md: 0.375rem; --fl-radius-lg: 0.5rem; /* Spacing (8px grid) */ --fl-2: 0.125rem; --fl-4: 0.25rem; --fl-8: 0.5rem; --fl-12: 0.75rem; --fl-16: 1rem; --fl-20: 1.25rem; --fl-24: 1.5rem; --fl-32: 2rem; /* Controls */ --fl-control-h: 2.5rem; --fl-font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", "Roboto", "Helvetica Neue", sans-serif; } /* -------------------------------------------------------------------------- Dark theme — swaps colour + elevation tokens only. Hook: (server-rendered from users.theme). Same specificity as :root, declared later, so it wins on in dark. -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { /* Brand — fill stays the GTA blue (legible on dark); hover/pressed lighten */ --fl-brand: #0080d0; --fl-brand-hover: #1f93da; --fl-brand-pressed: #46a7e2; --fl-brand-tint: #10293a; /* dark brand-tinted surface (was #e4f3fb) */ /* Neutral surfaces — Fluent 2 dark ramp */ --fl-bg-canvas: #141414; --fl-bg-surface: #1f1f1f; --fl-bg-subtle: #242424; --fl-bg-hover: #2d2d2d; --fl-bg-band: #1f1f1f; /* top band reads as one surface with the sidebar */ /* Strokes */ --fl-stroke: #3d3d3d; --fl-stroke-strong: #525252; /* Foreground / text */ --fl-fg: #ffffff; --fl-fg-secondary: #d1d1d1; --fl-fg-disabled: #757575; /* Status — foregrounds brighten, subtle backgrounds darken */ --fl-success: #5cbf5c; --fl-success-subtle: #0f2a0f; --fl-danger: #f1707a; --fl-danger-subtle: #2c1316; --fl-warning: #dcab3c; --fl-warning-subtle: #2a2310; --fl-info: #6cb8f6; --fl-info-subtle: #0e2439; /* Elevation — deeper on dark (design.md: 0.24 / 0.28 opacity) */ --fl-shadow-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, .28), 0 0 0.0625rem rgba(0, 0, 0, .24); --fl-shadow-8: 0 0.25rem 0.5rem rgba(0, 0, 0, .28), 0 0 0.125rem rgba(0, 0, 0, .24); --fl-shadow-16: 0 0.5rem 1rem rgba(0, 0, 0, .32), 0 0 0.125rem rgba(0, 0, 0, .28); /* Repair the template build bug — style.css sets --bs-body-bg:#fff under [data-bs-theme=dark] — and re-point Bootstrap's primary to the brand so native components (form-select caret, switches, accordions) render dark. */ --bs-body-bg: #141414; --bs-body-color: #ffffff; --bs-primary: #0080d0; --bs-primary-rgb: 0, 128, 208; --bs-border-color: #3d3d3d; }