/* ============================================================
* core/ui/theme.css
* Work-Hub Platform — shared visual system (Orbit Desk)
*
* Ports the Orbit Desk design tokens and component styles.
* Provides Orbit Desk-native tokens AND compatibility aliases
* for the existing --navy/--gold/--blue/--orange/--surface
* tokens used by the apps, so the new palette cascades through
* legacy rules without per-rule rewrites.
*
* Theme selection: body[data-theme="light"|"dark"].
* Defaults to light when no attribute set.
*
* NOTE: Fonts (Manrope + IBM Plex Sans) are loaded non-blocking
* by core/ui/theme-toggle.js via .
* We deliberately avoid @import here because @import blocks
* rendering until the remote CSS is fetched (this caused the
* "page unresponsive / long wait before content appears" issue).
* ============================================================ */
/* ---------- Structural tokens (theme-independent) ---------- */
:root {
--font-body: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
--font-display: "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
--font-head: var(--font-display);
--radius-xl: 28px;
--radius-lg: 20px;
--radius-md: 14px;
--radius-sm: 10px;
--radius: var(--radius-md);
--shadow-raised: 0 18px 40px rgba(10, 18, 33, 0.14);
--shadow: 0 1px 3px rgba(10, 18, 33, 0.08), 0 4px 12px rgba(10, 18, 33, 0.06);
--shadow-lg: 0 24px 56px rgba(10, 18, 33, 0.18);
--sidebar-w: 260px;
--sidebar-collapsed-w: 58px;
--header-h: 64px;
}
/* ---------- Light theme (default) ----------
* Apply on html or body. Existing apps set data-theme on
* ; marketing pages set it on . Cover both.
*/
:root,
html[data-theme="light"],
body[data-theme="light"] {
--page: #edf2f7;
--page-accent-a: rgba(88, 109, 255, 0.12);
--page-accent-b: rgba(47, 163, 136, 0.12);
--page-accent-c: rgba(231, 161, 71, 0.08);
--panel: rgba(255, 255, 255, 0.82);
--panel-2: rgba(250, 252, 255, 0.96);
--card: rgba(255, 255, 255, 0.95);
--line: rgba(75, 95, 134, 0.12);
--line-strong: rgba(75, 95, 134, 0.24);
--text: #17243b;
--muted: #47566f; /* darker — reads on translucent panels */
--accent: #516dff;
--accent-2: #279b82;
--accent-3: #d69232;
--danger: #e46072;
/* Legacy aliases (apps/expense, apps/todo, apps/site) */
--navy: #516dff;
--navy-light: #7286ff;
--navy-dark: #3f54cc;
--gold: #d69232;
--gold-light: #e0a857;
--gold-pale: rgba(214, 146, 50, 0.10);
--blue: #516dff;
--blue-dark: #3f54cc;
--blue-light: rgba(81, 109, 255, 0.08);
--orange: #d69232;
--orange-light: rgba(214, 146, 50, 0.10);
--purple: #6B46C1;
--purple-light: #F3EEFF;
--purple-bg: rgba(107, 70, 193, 0.10);
--dark: #17243b;
--dark-2: #516dff;
--mid: #47566f;
--surface: rgba(255, 255, 255, 0.70);
--white: #ffffff;
--text-muted: #47566f;
--text-light: #7a8aa8; /* no alpha — stays legible on translucent */
--border: rgba(75, 95, 134, 0.12);
--border-dark: rgba(75, 95, 134, 0.24);
--success: #279b82;
--success-bg: rgba(39, 155, 130, 0.10);
--warning: #d69232;
--warning-bg: rgba(214, 146, 50, 0.10);
--danger-bg: rgba(228, 96, 114, 0.10);
--info: #516dff;
--info-bg: rgba(81, 109, 255, 0.10);
}
/* ---------- Dark theme ---------- */
html[data-theme="dark"],
body[data-theme="dark"] {
--page: #0d1320;
--page-accent-a: rgba(95, 124, 255, 0.18);
--page-accent-b: rgba(88, 210, 180, 0.16);
--page-accent-c: rgba(255, 184, 92, 0.1);
--panel: rgba(17, 24, 38, 0.9);
--panel-2: rgba(23, 31, 49, 0.96);
--card: rgba(27, 35, 55, 0.92);
--line: rgba(145, 167, 214, 0.16);
--line-strong: rgba(145, 167, 214, 0.3);
--text: #eef3ff;
--muted: #b3c2de; /* lightened — reads on translucent dark panels */
--accent: #7d93ff;
--accent-2: #57d8bd;
--accent-3: #ffbe67;
--danger: #ff7e91;
/* Legacy aliases */
--navy: #7d93ff;
--navy-light: #9fb0ff;
--navy-dark: #5a74e6;
--gold: #ffbe67;
--gold-light: #ffd08a;
--gold-pale: rgba(255, 190, 103, 0.14);
--blue: #7d93ff;
--blue-dark: #5a74e6;
--blue-light: rgba(125, 147, 255, 0.14);
--orange: #ffbe67;
--orange-light: rgba(255, 190, 103, 0.14);
--purple: #b08bf1;
--purple-light: rgba(176, 139, 241, 0.16);
--purple-bg: rgba(176, 139, 241, 0.16);
--dark: #eef3ff;
--dark-2: #7d93ff;
--mid: #b3c2de;
--surface: rgba(23, 31, 49, 0.60);
--white: #0d1320;
--text-muted: #b3c2de;
--text-light: #8a9bbf;
--border: rgba(145, 167, 214, 0.16);
--border-dark: rgba(145, 167, 214, 0.30);
--success: #57d8bd;
--success-bg: rgba(87, 216, 189, 0.14);
--warning: #ffbe67;
--warning-bg: rgba(255, 190, 103, 0.14);
--danger-bg: rgba(255, 126, 145, 0.14);
--info: #7d93ff;
--info-bg: rgba(125, 147, 255, 0.14);
}
/* ---------- Global resets & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
min-height: 100%;
font-family: var(--font-body);
color: var(--text);
background:
radial-gradient(circle at 10% 10%, var(--page-accent-a), transparent 28%),
radial-gradient(circle at 88% 16%, var(--page-accent-b), transparent 24%),
radial-gradient(circle at 60% 100%, var(--page-accent-c), transparent 28%),
var(--page);
/* background-attachment: fixed removed — combined with body::before's
position:fixed grid it forced full-viewport repaints on scroll. */
}
body::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 34px 34px;
opacity: 0.16;
pointer-events: none;
z-index: 0;
}
body > * { position: relative; z-index: 1; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* ============================================================
* Orbit Desk native components (for new markup)
* ============================================================ */
.shell {
width: min(1720px, calc(100vw - 28px));
margin: 14px auto 26px;
}
.raised {
background: var(--panel);
border: 1px solid var(--line);
box-shadow: var(--shadow-raised);
/* backdrop-filter deliberately omitted: .raised is applied to
many panels per page; blurring each one causes a compositor
stall. Keep blur only on singleton chrome (sidebar, topbar,
modal, login card, site-nav). */
}
.topbar-raised {
border-radius: var(--radius-xl);
display: grid;
grid-template-columns: 280px 1fr auto;
gap: 16px;
align-items: center;
padding: 18px 20px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
width: 54px;
height: 54px;
border-radius: 16px;
background:
linear-gradient(140deg, var(--accent), rgba(255, 255, 255, 0.05)),
linear-gradient(220deg, rgba(255, 255, 255, 0.1), var(--accent-2));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 24px rgba(0, 0, 0, 0.18);
}
.eyebrow,
.section-kicker,
.entity-label {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 11px;
color: var(--muted);
}
.headline-chip,
.theme-toggle,
.ghost-button,
.inline-link,
.nav-tile,
.fit-card,
.task-card,
.radar-list-row,
.instance-row,
.metric-box,
.pulse-cell {
background: var(--panel-2);
border: 1px solid var(--line);
color: var(--text);
}
.headline-chip {
display: inline-flex;
flex-direction: column;
gap: 6px;
padding: 12px 16px;
border-radius: 16px;
}
.theme-toggle,
.ghost-button,
.inline-link {
padding: 10px 14px;
border-radius: 999px;
color: var(--text);
text-decoration: none;
}
.theme-toggle:hover,
.ghost-button:hover { border-color: var(--line-strong); }
.nav-tile {
text-align: left;
padding: 14px 16px;
border-radius: 18px;
display: grid;
gap: 6px;
}
.nav-tile.active {
border-color: var(--line-strong);
box-shadow: inset 0 0 0 1px rgba(125, 147, 255, 0.30);
}
.metric-box,
.pulse-cell { padding: 14px; border-radius: 16px; }
.pulse-cell strong,
.metric-box strong,
.score-badge {
display: block;
margin-top: 4px;
font-size: 22px;
font-family: var(--font-display);
}
.task-card {
padding: 15px;
display: grid;
gap: 12px;
border-radius: 18px;
text-align: left;
width: 100%;
}
.task-card h4 { margin-top: 4px; font-size: 18px; font-family: var(--font-display); }
.task-card.active { box-shadow: inset 0 0 0 1px rgba(125, 147, 255, 0.35); }
.task-card.blocked { box-shadow: inset 0 0 0 1px rgba(255, 126, 145, 0.35); }
.task-card.waiting { box-shadow: inset 0 0 0 1px rgba(255, 190, 103, 0.35); }
.task-card.complete { opacity: 0.72; }
.score-badge {
min-width: 52px;
padding: 10px 12px;
border-radius: 16px;
text-align: center;
background: linear-gradient(160deg, rgba(125, 147, 255, 0.28), rgba(87, 216, 189, 0.14));
font-size: 18px;
}
.meta-row,
.flag-row,
.detail-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.meta-row span,
.flag,
.detail-chips span {
padding: 6px 10px;
border-radius: 999px;
background: var(--panel-2);
border: 1px solid var(--line);
font-size: 12px;
}
/* ============================================================
* Legacy class adapters — applies Orbit Desk surfaces to the
* class vocabulary already used by apps/expense and apps/todo
* (and apps/site where overlap exists). Loaded *after* each
* app's inline