/* Inter, from this origin rather than from Google. The @font-face rules and the
measurement that moved them live in fonts.css; both this file and styles.css
pull it in because their page lists are disjoint. */
@import url('/fonts.css');
/* ===========================================================================
Grafy shared design tokens — the single source of truth for EVERY surface
(app, chat, code, 3D studio, social). The baseline is app/web.
Served by the backend at /design-tokens.css (StaticFiles mount of app/web).
Same-origin pages it directly; the compiled SPAs (chat/code/studio)
inline the same values in their own :root and also link this file so future
edits here propagate. Satellite variable names are ALIASED onto the unified
palette so each app can adopt this file without renaming its var(--...) refs.
=========================================================================== */
:root {
color-scheme: dark;
/* --- Background / surface layers (deep blue-slate "ink") --- */
--bg: #0b0e15;
--panel: #13161f;
--panel-2: #191d28;
--panel-3: #1f2733;
--line: #2b313e;
--line-soft: #1f2430;
--surface: #14171f;
--surface-raised: #1b1f2a;
--surface-inset: #0e1017;
--surface-deep: #090b11;
--control: #171b23;
/* Empty-space texture: a faint 24px diagonal checkerboard, drawn behind
"nothing here yet" on every surface. Compose over any background
colour -- it is white at 1.8% alpha, so it reads on any dark ink. */
--empty-pattern:
linear-gradient(45deg, rgba(255, 255, 255, .018) 25%, transparent 25%,
transparent 75%, rgba(255, 255, 255, .018) 75%),
linear-gradient(45deg, rgba(255, 255, 255, .018) 25%, transparent 25%,
transparent 75%, rgba(255, 255, 255, .018) 75%);
--empty-pattern-size: 24px 24px;
--empty-pattern-position: 0 0, 12px 12px;
--scroll-thumb: #3a3f4b;
/* --- Text --- */
--text: #f4f2ed;
--text-soft: #cbd2da;
--text-faint: #737985;
--muted: #979ba4;
/* --- Accent (unified neutral gray-blue) --- */
--accent: #aeb7c2;
--accent-dark: #20252c;
--accent-dim: #20252c;
--on-accent: #0f1318;
/* --- Semantic --- */
--danger: #ff6b6b;
--ok: #57d9a3;
--warn: #ffcf70;
/* --- Radius scale --- */
--radius: 20px;
--radius-lg: 20px;
--radius-md: 14px;
--radius-sm: 9px;
/* --- Misc --- */
--shadow: rgba(0, 0, 0, .38);
/* --- Satellite aliases: map their names onto the unified palette so a
satellite can just this file without renaming its variables. --- */
--bg-elev: var(--panel);
--bg-elev-2: var(--panel-2);
--bg-editor: var(--surface-inset);
--sidebar-bg: var(--surface-inset);
--border: var(--line);
--border-soft: var(--line-soft);
--text-dim: var(--muted);
--faint: var(--text-faint);
--accent-2: var(--accent);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Light theme — the same palette the graph app's light mode uses
(styles.css :root[data-theme="light"]), so every satellite that styles
itself in these tokens follows the theme switch with no work of its own.
The satellites do not darken the accent the way the app's applyAppearance()
does, so --accent stays the stored light value and --on-accent stays dark
ink. The empty-space texture flips to black-alpha or it vanishes on white. */
html[data-theme="light"] {
color-scheme: light;
--bg: #f2f4f7;
--panel: #ffffff;
--panel-2: #f5f7fa;
--panel-3: #eef1f5;
--line: #c8ced8;
--line-soft: #e1e5eb;
--surface: #f7f8fa;
--surface-raised: #ffffff;
--surface-inset: #eef1f5;
--surface-deep: #e5e9ef;
--control: #f7f8fa;
--empty-pattern:
linear-gradient(45deg, rgba(15, 23, 42, .03) 25%, transparent 25%,
transparent 75%, rgba(15, 23, 42, .03) 75%),
linear-gradient(45deg, rgba(15, 23, 42, .03) 25%, transparent 25%,
transparent 75%, rgba(15, 23, 42, .03) 75%);
--scroll-thumb: #aeb6c2;
--text: #151922;
--text-soft: #354052;
--text-faint: #758094;
--muted: #596273;
--accent-dark: color-mix(in srgb, var(--accent) 20%, #ffffff);
--accent-dim: color-mix(in srgb, var(--accent) 20%, #ffffff);
--danger: #c83f4b;
--shadow: rgba(31, 41, 55, .14);
}
/* ===================== Grafy cross-app rail (shared) ===================== */
.grafy-railed { padding-left: 56px; }
.grafy-rail {
position: fixed; left: 0; top: 0; bottom: 0; width: 56px; z-index: 200;
background: var(--surface-inset); border-right: 1px solid var(--line);
display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0;
}
.grafy-rail-brand { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 6px; }
.grafy-rail-brand img { width: 24px; height: 24px; display: block; }
.grafy-rail-nav { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.grafy-rail-item {
position: relative; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
font-size: 17px; text-decoration: none; color: var(--text-faint); border: 1px solid transparent; line-height: 1;
}
.grafy-rail-item:hover { color: var(--text); background: var(--panel-2); }
.grafy-rail-item.active { color: var(--text); background: var(--panel-2); border-color: var(--line); }
.grafy-rail-item.active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 2px; background: var(--accent); }
.grafy-rail-spacer { flex: 1; }
.grafy-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.grafy-rail-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-soft); font-size: 15px; cursor: pointer; display: grid; place-items: center; position: relative; }
.grafy-rail-btn:hover { color: var(--text); background: var(--panel-2); }
.grafy-rail [data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 46px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font-size: 12px; z-index: 210; pointer-events: none; }