/* Data Lab uses existing AVDS metric, evidence, chart and table surfaces. */

body[data-avds-page="demos"] {
  --surface-canvas: #f7f3ec;
  --surface-base: #fffdf9;
  --surface-muted: #f5f0e8;
  --avds-surface-tint: #faf6ef;
}

body[data-avds-page="demos"] .seo-main {
  background: var(--surface-canvas);
}

html[data-theme="dark"] body[data-avds-page="demos"] {
  --surface-canvas: #181a1f;
  --surface-base: #22252b;
  --surface-muted: #1c1f24;
  --surface-hover: #2c3037;
  --surface-elevated: #252930;
  --color-text-primary: #f3f3f4;
  --color-text-secondary: #c9cbd0;
  --color-text-muted: #9da3ad;
  --color-border-default: #41454e;
  --color-border-subtle: #333740;
  --color-accent-secondary: #95a5ba;
  background: var(--surface-canvas);
}

html[data-theme="dark"] body[data-avds-page="demos"] .header .logo-img,
html[data-theme="dark"] body[data-avds-page="demos"] .footer-brand img {
  filter: invert(1);
  opacity: 0.75;
}

html[data-theme="dark"] body[data-avds-page="demos"] .data-lab {
  --lab-green: var(--color-accent-secondary);
}

html[data-theme="dark"] body[data-avds-page="demos"] .data-lab-hero-visual,
html[data-theme="dark"] body[data-avds-page="demos"] .data-lab-topic,
html[data-theme="dark"] body[data-avds-page="demos"] .data-lab-source,
html[data-theme="dark"] body[data-avds-page="demos"] .data-lab-review-table-wrap {
  background: var(--surface-base);
}

html[data-theme="dark"] body[data-avds-page="demos"] .data-lab-result,
html[data-theme="dark"] body[data-avds-page="demos"] .data-lab-query-preview {
  background: var(--surface-muted);
}