/*
* FOUT prevention for Material Symbols icon font.
* While the font is downloading, every name
* briefly renders the literal name as text (e.g. "business_center" instead of the icon).
* Hide them until is set by JS (main.tsx's document.fonts.ready listener).
*/
.material-symbols-rounded,
.material-symbols-outlined,
.material-symbols-sharp {
visibility: hidden;
}
body.fonts-loaded .material-symbols-rounded,
body.fonts-loaded .material-symbols-outlined,
body.fonts-loaded .material-symbols-sharp {
visibility: visible;
}
/*
* Normaize
*/
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: var(--C-c-1);
background-color: var(--C-bg-1);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* Recolor browser-drawn form controls (checkbox, radio, range,
* progress, etc.) to brand orange. Browsers auto-pick a contrasting
* inner mark, so this looks right on both themes. Per-surface
* overrides (e.g. `[theme=light] .authPage { accent-color: ... }`)
* can drift this later if a surface ever wants its own accent. */
accent-color: var(--brand-500);
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
--app-100vh: 100vh;
}
* {
margin: 0;
box-sizing: border-box;
}
/* Theme-swap uses the View Transitions API (see
* client/src/utils/themeTransition.ts) — the browser takes a GPU
* snapshot of the old + new state and reveals the new one from
* `--theme-swap-cx` / `--theme-swap-cy` out to the far viewport
* corner. ONE GPU animation regardless of DOM size, so big lists
* don't stall the swap. Falls back to instant swap on browsers
* without the API and when prefers-reduced-motion is set.
*
* The reveal uses a mask-image radial-gradient (not clip-path) so
* the edge is FEATHERED — reads as a soft flashlight beam expanding
* from the click point, not a hard-edged expanding pupil. `@property`
* registers the animatable percentage so the gradient stops
* interpolate frame-by-frame on the GPU. */
@property --theme-reveal {
syntax: '';
inherits: false;
initial-value: 0%;
}
::view-transition-old(root) {
animation: none;
}
::view-transition-new(root) {
/* `forwards` pins the end state (--theme-reveal: 200%, mask fully
* transparent → new snapshot fully visible) until the browser
* tears down the pseudo-element. Without it, `@property` snaps
* `--theme-reveal` back to its initial 0% for one frame after
* the animation ends — the mask collapses to a point and the OLD
* snapshot briefly bleeds through, which reads as a flash. */
animation: theme-swap-reveal 1600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
/* Soft feather: opaque core from center out to `reveal - 18%`,
* fading to transparent at `reveal`. The ~18% window at any
* given moment is the "beam edge" — wider = softer / dreamier. */
mask-image: radial-gradient(
circle at var(--theme-swap-cx, 50%) var(--theme-swap-cy, 50%),
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) calc(var(--theme-reveal) - 6%),
rgba(0, 0, 0, 0) var(--theme-reveal)
);
-webkit-mask-image: radial-gradient(
circle at var(--theme-swap-cx, 50%) var(--theme-swap-cy, 50%),
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) calc(var(--theme-reveal) - 6%),
rgba(0, 0, 0, 0) var(--theme-reveal)
);
z-index: 1;
}
@keyframes theme-swap-reveal {
from { --theme-reveal: 0%; }
/* End at 200% (double the farthest-corner distance) so the soft
* feather edge itself finishes off-screen — no visible boundary
* hangs around at the finish. */
to { --theme-reveal: 200%; }
}
/* Respect user preference — no animation for reduced-motion. */
@media (prefers-reduced-motion: reduce) {
::view-transition-new(root),
::view-transition-old(root) {
animation: none;
}
}
body {
margin: 0;
color: var(--C-c-1);
background-color: var(--C-bg-1);
min-width: 320px;
height: var(--app-100vh);
overflow: hidden; /* inner content boxes handle their own scroll */
}
/* ─── Native — global reskin.
*
* The app has ~350 native `` elements across 150+ files.
* Rewriting each to the custom `Dropdown` component would take days.
* Instead we style the CLOSED state of every native select to match
* the platform's chip aesthetic (border-radius, brand focus ring,
* custom chevron, theme-aware bg + color). Users see the closed
* state 95% of the time; the dropdown panel that opens is OS-owned
* and can't be styled cross-browser, but at least it inherits the
* theme via `color-scheme` set on the theme roots.
*
* Opt-out: add `.native-select` to any `` that must keep the
* raw OS look (rare — usually inside legacy inline mockups).
*
* Element selectors have low specificity, so any module CSS class on
* a specific `` still wins — no need to hunt down overrides. */
select:not(.native-select) {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Keep the chevron in the padding so it never overlaps the value. */
padding: 0.4rem 2rem 0.4rem 0.7rem;
min-height: 34px;
border: 1px solid var(--C-b-2);
border-radius: 8px;
background-color: var(--C-bg-1);
/* Chevron — hardcoded neutral gray reads on both themes. */
background-image: url("data:image/svg+xml;utf8, needs a stripe, add a
class-scoped rule to that component instead of a global element
selector. */
/*
* Vars
*/
:root {
--SBapps-w: 56px;
--SB-w: 200px;
--SB-calendar-w: 280px;
--H-h: 50px;
--N-h: 30px;
--W-SA-sb: 4px;
--shadow-1: 0 4px 6px 0 var(--C-shadow);
--border-1: 1px solid var(--C-b-2);
--border-st: 1px solid var(--C-st);
--border-r-1: 4px;
--border-r-2: 8px;
--border-r-3: 14px;
}
/*
* ───── Firefice Design System — color tokens ─────────────────────────
*
* Brand: warm-orange family (Material Deep Orange ramp). The brand
* ramp `--brand-50..900` is mode-agnostic — same orange shades sit on
* both themes; what changes per theme is the surface + text + border
* palette. Use brand tokens ONLY for accents, CTAs, links, focus and
* branded surfaces. Use surface/text/border tokens for everything
* structural so that swapping the brand later means editing one ramp.
*
* Semantic state colours (success/warning/danger/info) are independent
* of the brand — they communicate meaning, not identity.
*
* Legacy aliases (`--C-primary`, `--C-a`, `--C-c-r`, ...) are kept so
* the thousands of existing references in the app keep working — they
* now point at brand / semantic tokens.
*
* Full reference + intended usage per token: docs/branding/design-system.md.
*/
:root {
/* ─── Brand ramp — Firefice identity (Material Deep Orange family).
* MODE-AGNOSTIC and IMMUTABLE: same hex on both themes; this is the
* canonical company identity and never changes per user. Used by
* `--marketing-*` (always) and as the *default* for `--ui-*` (which
* users can later override per-org for their in-app workspace). */
--brand-50: #fff3e9;
--brand-100: #ffe1cd;
--brand-200: #ffc4a4;
--brand-300: #ffa074;
--brand-400: #ff8a65;
--brand-500: #ff7043; /* canonical "Firefice orange" */
--brand-600: #f4511e;
--brand-700: #e64a19;
--brand-800: #d84315;
--brand-900: #bf360c;
--brand-rgb: 255, 112, 67;
/* ─── Three-surface theming.
*
* Firefice has three visually-distinct surfaces, each owning its own
* primary namespace so they can drift independently in the future
* without us hunting through hardcoded hex everywhere:
*
* 1. PUBLIC (--marketing-*) landing page, help docs, 404, mobile
* install landing — anything visible to the unauthenticated
* public web. ALWAYS fixed brand orange (the public identity
* doesn't change per user).
* 2. AUTH (--auth-*) login, signup, recover, reset,
* verify-email, waitlist, 2FA challenge, OAuth consent — the
* account surface. Today equal to marketing; kept separate so
* a future redesign could give auth its own personality (e.g.
* a more "secure / calm" palette) without touching either
* adjacent surface.
* 3. APP (--ui-primary-*) the authenticated shell + every
* subapp. User / org overridable — that's the whole point of
* having it separate from the brand.
*
* RULE: in a component, pick the namespace that matches the surface
* the component lives on. Never reach across (don't use --ui-primary
* on the landing page; don't use --marketing-primary in an in-app
* dashboard). The shared --brand-* ramp is the only correct way to
* say "Firefice identity always" — use it for the logo mark itself.
*
* If you only need ONE namespace's value, prefer the brand ramp
* directly (e.g. logo, favicon swatch). If you need "the primary of
* THIS surface" so it can theme independently later, use the
* surface-specific token. */
/* PUBLIC surface — landing, help docs, 404, etc. Fixed identity. */
--marketing-primary: var(--brand-500);
--marketing-primary-hover: var(--brand-600);
--marketing-primary-active: var(--brand-700);
--marketing-primary-soft: rgba(255,112,67,0.12);
--marketing-primary-soft-bg: var(--brand-50); /* opaque tint for light bg */
--marketing-primary-rgb: var(--brand-rgb);
/* AUTH surface — login, signup, etc. Currently aliases marketing
* (same orange) but the indirection lets the auth team redesign
* independently of either marketing or in-app. */
--auth-primary: var(--marketing-primary);
--auth-primary-hover: var(--marketing-primary-hover);
--auth-primary-active: var(--marketing-primary-active);
--auth-primary-soft: var(--marketing-primary-soft);
--auth-primary-soft-bg: var(--marketing-primary-soft-bg);
--auth-primary-rgb: var(--marketing-primary-rgb);
/* Auth input field background. Pages should pass this to InputField
* instead of --C-bg-0 so the input matches the card in BOTH themes:
* - dark → same dark fill the cards have always used
* - light → pure white (card is white too, no "cream box around
* a white input" effect)
* Default = bgc-0 (dark behavior); the [theme="light"] block flips
* it to white. */
--auth-input-bg: var(--C-bg-0);
/* ═══════════════════════════════════════════════════════════════════
* COLOUR SYSTEM — 3-tier token architecture (advanced / futureproof)
* ═══════════════════════════════════════════════════════════════════
*
* Tier 1 PRIMITIVES raw hue ramps (--red-500 …). Mode-agnostic, the
* only place a literal hex ever lives. Never used
* directly by a component.
* Tier 2 SEMANTIC role aliases (--color-danger …) → a ramp step.
* Re-pointed per theme in the [theme="*"] blocks so
* every consumer shifts a shade with the theme for
* free. This is what components use.
* Tier 3 ROLE domain tokens (--status-*, --priority-*) → the
* semantic layer. Add a domain here, not new hexes.
*
* To rebrand / add a theme / add a high-contrast mode: touch the
* mapping, never the ramps. Inline-style call sites use semanticColors.ts
* which returns `var(--token)` so they stay theme-aware too.
* ═══════════════════════════════════════════════════════════════════ */
/* ── Tier 1: primitive ramps (Tailwind-calibrated, mode-agnostic) ── */
--red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-300:#fca5a5; --red-400:#f87171; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c; --red-800:#991b1b; --red-900:#7f1d1d;
--amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309; --amber-800:#92400e; --amber-900:#78350f;
--orange-50:#fff7ed; --orange-100:#ffedd5; --orange-200:#fed7aa; --orange-300:#fdba74; --orange-400:#fb923c; --orange-500:#f97316; --orange-600:#ea580c; --orange-700:#c2410c; --orange-800:#9a3412; --orange-900:#7c2d12;
--green-50:#f0fdf4; --green-100:#dcfce7; --green-200:#bbf7d0; --green-300:#86efac; --green-400:#4ade80; --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d; --green-800:#166534; --green-900:#14532d;
--blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd; --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af; --blue-900:#1e3a8a;
--violet-50:#f5f3ff; --violet-100:#ede9fe; --violet-200:#ddd6fe; --violet-300:#c4b5fd; --violet-400:#a78bfa; --violet-500:#8b5cf6; --violet-600:#7c3aed; --violet-700:#6d28d9; --violet-800:#5b21b6; --violet-900:#4c1d95;
--gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827;
/* ── Tier 2: semantic state colours — DARK defaults ──
* (the [theme="light"] block re-points these one step darker for
* contrast on light surfaces; consumers below adapt automatically).
* Each family: base (fills/text), -strong (hover/border/emphasis),
* -bg (subtle translucent tint). NEVER hardcode these hexes — use the
* token (CSS) or semanticColors.ts (inline styles). */
--color-success: var(--green-500); --color-success-strong: var(--green-600); --color-success-bg: rgba(34,197,94,0.12);
--color-warning: var(--amber-500); --color-warning-strong: var(--amber-600); --color-warning-bg: rgba(245,158,11,0.15);
--color-danger: var(--red-500); --color-danger-strong: var(--red-600); --color-danger-bg: rgba(239,68,68,0.12);
--color-info: var(--blue-500); --color-info-strong: var(--blue-600); --color-info-bg: rgba(59,130,246,0.12);
--color-accent: var(--violet-500); --color-accent-strong: var(--violet-600); --color-accent-bg: rgba(139,92,246,0.12);
--color-neutral: var(--gray-400); --color-neutral-strong: var(--gray-500); --color-neutral-bg: rgba(156,163,175,0.14);
/* ── Tier 3: status — canonical task/issue/list status colours.
* "in progress" is BLUE (active); amber is reserved for "blocked".
* Map any vocabulary (todo/open/backlog, done/resolved/complete,
* cancelled/closed) onto these — see semanticColors.ts. */
--status-todo: var(--color-neutral-strong);
--status-progress: var(--color-info);
--status-done: var(--color-success);
--status-cancelled: var(--color-neutral);
--status-blocked: var(--color-warning);
/* ── Tier 3: priority — canonical scale (matches shared PriorityDot).
* critical/urgent = red, high = orange, medium/normal = blue, low = grey. */
--priority-critical: var(--color-danger);
--priority-high: var(--orange-500);
--priority-medium: var(--color-info);
--priority-low: var(--color-neutral);
}
[theme="dark"] {
/* Pin browser-rendered form controls (checkboxes, radios, native
* scrollbars, date pickers, etc.) to the matching palette. Without
* this, OS pref leaks through and a user on a light-OS sees dark
* controls in our light mode (or vice versa). */
color-scheme: dark;
/* Surfaces (warm neutrals — subtle orange tint, not slate blue) */
--C-bg-0: #0d0a08;
--C-bg-0-h: #100c0a;
--C-bg-1: #141210;
--C-bg-2: #1a1715;
--C-bg-3: #221d1a;
--C-bg-4: #2d2723;
--C-bg-st-1: #0505057c;
/* Text */
--C-c-1: #e8e3df;
--C-c-2: #b9b3ad;
--C-c-3: #8c867f;
--C-c-4: #5e5852;
--C-c-on-brand: #ffffff; /* for text sitting on a brand background */
/* Borders */
--C-b-1: #2b2724;
--C-b-2: #3d3733;
/* Anchors / links — point at the UI primary so they follow user
* customization in-app. Marketing surfaces should override these
* with --marketing-primary directly. */
--C-a: var(--ui-primary-soft-fg);
--C-a-h: var(--ui-primary-hover);
/* ─── In-app UI primary — user/org overridable.
* Defaults to the brand ramp but is the override surface for
* per-org / per-user brand customization. To customize at runtime,
* inject a