/* One persistent background, behind all routes and their readable panels. */
#root { isolation: isolate; }
#apiko-site-motion-background { position:fixed; inset:0; z-index:0; pointer-events:none; }
.apiko-app-content { position:relative; z-index:1; min-height:100svh; }
#root .apiko-app-content :is(.apiko-public-shell, .hetu-home-shell, .hetu-console-shell, .hetu-pricing-shell, .hetu-auth-shell, .hetu-doc-shell) {
  background:transparent !important;
}
#root .apiko-app-content :is(.hetu-home-shell, .hetu-console-shell, .hetu-pricing-shell, .hetu-auth-shell, .hetu-doc-shell)::before {
  background:transparent !important;
}
#root .apiko-app-content .hetu-console-shell [data-slot='sidebar-wrapper'] { background:transparent !important; }
#root .apiko-app-content .hetu-console-shell [data-slot='sidebar-inset'] {
  background:color-mix(in oklch, var(--background) 36%, transparent) !important;
}
/* Pricing previously inherited pale labels from its dark video backdrop. */
html.light #root .apiko-app-content .hetu-pricing-shell :is(.hetu-pricing-hero__lead, .hetu-pricing-eyebrow, .hetu-pricing-census p),
html.light #root .apiko-app-content .hetu-pricing-shell > header button {
  color:var(--apiko-blue-950) !important;
}
html.dark #root .apiko-app-content .hetu-pricing-shell :is(.hetu-pricing-hero__lead, .hetu-pricing-eyebrow, .hetu-pricing-census p) {
  color:var(--apiko-white) !important;
}
html.light #root .apiko-app-content .hetu-pricing-shell .hetu-pricing-search-wrap {
  background:color-mix(in oklch, var(--card) 94%, transparent) !important;
}

/* Keep the explicit Default preset on its neutral console palette. */
html.light:has(body[data-theme-preset='default']) #root .apiko-app-content .hetu-console-shell {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: var(--foreground);
  --popover: oklch(1 0 0);
  --popover-foreground: var(--foreground);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.49 0 0);
  --secondary: oklch(0.95 0 0);
  --secondary-foreground: oklch(0.4 0.045 58);
  --border: oklch(0.93 0 0);
  --input: oklch(0.93 0 0);
  --sidebar: color-mix(in oklch, var(--foreground) 0.5%, var(--background));
  --sidebar-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-accent-foreground: var(--foreground);
  --apiko-console-canvas: oklch(0.985 0 0);
  --apiko-console-header: var(--background);
  --apiko-ink: var(--foreground);
  --apiko-muted: var(--muted-foreground);
  --apiko-line: var(--border);
  --hetu-overlay-paper: var(--popover);
  --hetu-overlay-paper-muted: var(--muted);
  --hetu-overlay-ink: var(--foreground);
  --hetu-overlay-muted: var(--muted-foreground);
  --hetu-overlay-line: var(--border);
  --skeleton-base: var(--muted);
  --skeleton-highlight: oklch(0.985 0 0);
}

html.dark:has(body[data-theme-preset='default']) #root .apiko-app-content .hetu-console-shell {
  --background: oklch(0.235 0 0);
  --foreground: oklch(0.965 0 0);
  --card: oklch(0.285 0 0);
  --card-foreground: var(--foreground);
  --popover: oklch(0.305 0 0);
  --popover-foreground: var(--foreground);
  --muted: oklch(0.305 0 0);
  --muted-foreground: oklch(0.78 0 0);
  --secondary: oklch(0.335 0 0);
  --secondary-foreground: oklch(0.9 0.05 250);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 17%);
  --sidebar: oklch(0.225 0 0);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(1 0 0 / 11%);
  --sidebar-accent-foreground: oklch(0.9 0.05 250);
  --apiko-console-canvas: color-mix(in oklch, var(--foreground) 6%, var(--background));
  --apiko-console-header: color-mix(in oklch, var(--foreground) 2.5%, var(--background));
  --apiko-ink: var(--foreground);
  --apiko-muted: var(--muted-foreground);
  --apiko-line: var(--border);
  --hetu-overlay-paper: var(--popover);
  --hetu-overlay-paper-muted: var(--muted);
  --hetu-overlay-ink: var(--foreground);
  --hetu-overlay-muted: var(--muted-foreground);
  --hetu-overlay-line: var(--border);
  --skeleton-base: oklch(0.335 0 0);
  --skeleton-highlight: oklch(0.44 0 0);
}

html.light:has(body[data-theme-preset='default']) #root .apiko-app-content .hetu-console-shell [data-slot='sidebar-inset'],
html.dark:has(body[data-theme-preset='default']) #root .apiko-app-content .hetu-console-shell [data-slot='sidebar-inset'] {
  background: color-mix(in oklch, var(--background) 92%, transparent) !important;
}