/* SuperCala app-shell tokens — dark + light palettes shared by the
 * full-viewport utility apps (ChartLab, JsonEditor, PdfFiller, future
 * tools). Source of truth for the SuperCala blue accent (#00a2e8) and
 * the neutrals these apps share. Mirrors the light palette in
 * supercala-shared.css so app surfaces and the studio landing page
 * read as the same product family.
 *
 * Per-app stylesheets load AFTER this file; product-specific tokens
 * (e.g. JsonEditor's syntax-highlight colors, PdfFiller's secondary
 * accent) override on cascade.
 */

:root {
  /* Dark default — applied when body has no data-theme="light". The
     viewport-fixed apps lean heavily dark, so this is the baseline. */
  --bg: #0d1117;
  --bg-elev: #161b22;
  --bg-elev-2: #1f242d;
  --bg-elev-3: #2a313c;
  --fg: #e6edf3;
  --fg-dim: #8b949e;
  --fg-faint: #586069;
  --accent: #00a2e8;
  --accent-strong: #0082ba;
  --accent-soft: rgba(0, 162, 232, 0.14);
  --accent-fg: #ffffff;
  --green: #3fb950;
  --amber: #d29922;
  --red: #f85149;
  --danger: #f85149;
  --border: #30363d;
  --topbar-bg: rgba(22, 27, 34, 0.78);

  /* Page fade — colors the top edge of the viewport behind transparent
     surfaces (topbar). Mirrors SuperCalaSite's .page gradient. Subtle
     in dark mode so the chart UI doesn't fight it. */
  --bg-fade: linear-gradient(
    to bottom,
    rgba(0, 162, 232, 0.16),
    rgba(48, 54, 61, 0.06) 400px,
    transparent 800px
  );
}

body[data-theme="light"] {
  --bg: #ffffff;
  --bg-elev: #f8fafc;
  --bg-elev-2: #eef2f6;
  --bg-elev-3: #dde3ea;
  --fg: #0f172a;
  --fg-dim: #64748b;
  --fg-faint: #94a3b8;
  --border: #e2e8f0;
  --accent: #00a2e8;
  --accent-strong: #0082ba;
  --accent-soft: rgba(0, 162, 232, 0.08);
  --accent-fg: #ffffff;
  --green: #16a34a;
  --amber: #b45309;
  --red: #dc2626;
  --danger: #dc2626;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --bg-fade: linear-gradient(
    to bottom,
    rgba(0, 162, 232, 0.24),
    rgba(195, 195, 195, 0.16) 400px,
    transparent 800px
  );
}

/* Apply the fade as the body's actual background — sits beneath any
   solid-bg pane (workspace, sidebar) and shows through transparent or
   blurred surfaces (topbar). The chained gradient + solid means the
   fade is layered above --bg, not replacing it. */
html, body {
  background: var(--bg-fade), var(--bg);
}

/* Topbar is the surface that lets the fade through, matching the
   SuperCalaSite navbar's blurred translucency. Per-app stylesheets
   set the rest of the topbar layout. */
.topbar {
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}