/* IT-Service palette: dark AI page + its existing light-theme surfaces. */
:root {
  color-scheme: dark;
  --font-body: "Golos Text", Arial, sans-serif;
  --font-heading: "Nagel", "Golos Text", Arial, sans-serif;
  --bg: #020f16;
  --deep: #010b10;
  --surface-section: #041923;
  --surface-panel: #062330;
  --surface-raised: #082a38;
  --text: #f4f9f8;
  --text-secondary: #b4c4c8;
  --muted: #91a8ae;
  --border: rgba(205, 233, 235, .11);
  --hover-subtle: rgba(205, 233, 235, .045);
  --brand-green: #44a065;
  --brand-red: #ff0000;
  --green: #7bc982;
  --teal: #44a065;
  --action-bg: #2f7d4d;
  --action-hover: #286d43;
  --action-text: #ffffff;
  --light: #f5f7f7;
  --ink: #172f38;
  --muted-on-light: #405c66;
  --subtle-on-light: #526b74;
  --accent-on-light: #246c42;
  --border-light: #d5e0e3;
  --success-light: #e8f3ec;
  --chart-blue: #83a6b5;
  --chart-neutral: #bac9bc;
  --radius: 18px;
  --shadow: 0 20px 70px rgba(0, 0, 0, .18);
}

/* Light sections keep their original place in this alternative composition. */
.light {
  color-scheme: light;
  --border: var(--border-light);
  --green: var(--accent-on-light);
  --muted: var(--muted-on-light);
}

.light :is(.video-screen, .statement) {
  color-scheme: dark;
  --green: #7bc982;
  --muted: #91a8ae;
  --border: rgba(205, 233, 235, .11);
}