@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..800&display=swap');

/* ===========================================================================
   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 <link> 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;
  --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 <link> 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;
}

/* ===================== 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; }