/* 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.
     color-scheme tells the browser to paint native form controls
     (range sliders, scrollbars, OTP digit boxes, native <select>s) in
     the matching scheme. Without it, Chrome/Firefox/Safari fall back
     to the OS preference and paint dark slider tracks on a light page
     (or vice versa) — exactly what shipped on RetirementCalculator
     after the light-theme pin. */
  color-scheme: dark;
  --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);
  /* Native form-control track colour. Pulled out as its own token
     because the dashboard surfaces (--bg-elev-3) are too close to
     the panel background to read as "this is a slider track" at
     typical viewing distance. This is a dedicated mid-tone that
     stays visible against either elevation. Used by Retirement
     Calculator's sliders; safe to adopt anywhere else with native
     range inputs (color-scheme + accent-color alone leaves the
     unfilled track at the UA's dark default in Chromium). */
  --slider-track: #3a414b;

  /* 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"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elev: #f8fafc;
  --bg-elev-2: #eef2f6;
  --bg-elev-3: #dde3ea;
  --fg: #0f172a;
  --fg-dim: #64748b;
  --fg-faint: #94a3b8;
  --border: #e2e8f0;
  /* Light-mode slider track — slate-300. Visible against the panel
     elevation without screaming "input field". See the dark-mode
     definition for the full rationale. */
  --slider-track: #cbd5e1;
  --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.

   z-index is required because ``backdrop-filter`` creates a new
   stacking context. Without an explicit z-index on the topbar itself,
   any positioned descendant (e.g. the apps-grid popover at z-index
   1100) is trapped at the topbar's auto level — and sibling page
   elements later in document order (#main, dropzone) render on top
   of the popover regardless of how high its inner z-index is. */
.topbar {
  /* Flex layout puts the brand on the left and lets `.topbar-right
     { margin-left: auto }` (in supercala-topbar.css) push the account
     cluster to the right edge. Without these, every host that doesn't
     define its own `.topbar { display: flex }` ended up with the apps-
     grid + sign-out stacked vertically in the top-left — that was the
     RetirementCalculator regression report. Padding + border-bottom
     are the studio convention; per-app stylesheets can still tweak
     them on cascade. */
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1000;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}