/*
 * Loaded last in _LayoutTemplatePreview.cshtml.
 * Prevents template CSS :root variables from bleeding into the outer preview chrome.
 * Template CSS files share the same document, so their :root overrides the preview
 * frame's variables. We re-declare on specific chrome selectors to isolate the damage.
 */

body {
  background: #0A0A0B !important;
  padding-top: 0 !important;
  color: #FAFAF8 !important;
}

.top-bar,
.device-bar,
.preview-area,
.preview-wrapper,
.preview-browser-bar,
.device-btn,
.device-sep,
.action-btn,
.top-bar-back,
.top-bar-info,
.top-bar-title,
.top-bar-badge,
.top-bar-chip,
.top-bar-features,
.top-bar-sep,
.device-bar-actions {
  --ink:        #0A0A0B;
  --ink2:       #141416;
  --ink3:       #1C1C1E;
  --ink4:       #262628;
  --gold:       #D4A855;
  --gold2:      #E8C47E;
  --gold-dim:   rgba(212,168,85,.08);
  --gold-line:  rgba(212,168,85,.2);
  --white:      #FAFAF8;
  --white2:     #C4C4C0;
  --white3:     #858583;
  --border:     rgba(250,250,248,.08);
  --border2:    rgba(250,250,248,.12);
  --sans:       'Inter','Noto Sans TC',sans-serif;
  --mono:       'IBM Plex Mono',monospace;
}