:root {
  color-scheme: dark;

  /* Canvas and background texture */
  --app-bg: #0e0e10;
  --app-bg-dot: rgba(255, 255, 255, 0.1);
  --app-bg-grid: rgba(255, 255, 255, 0.025);

  /* Surface layers */
  --surface: #2a2a2c;
  --surface-raised: #1d1d1f;
  --surface-sunken: #242426;
  --surface-hover: #3a3a3c;
  --surface-hover-strong: #303033;
  --surface-overlay: rgba(42, 42, 44, 0.98);
  --surface-overlay-alt: rgba(27, 27, 29, 0.98);
  --surface-map: rgba(23, 33, 37, 0.78);
  --surface-map-deep: #172125;
  --surface-map-control: rgba(32, 33, 36, 0.82);
  --surface-veil: rgba(14, 14, 16, 0.78);
  --surface-translucent: rgba(58, 58, 60, 0.35);

  /* Text */
  --text: #ffffff;
  --text-muted: #a3a3a6;
  --text-subtle: #77777a;
  --text-soft: #d8d8da;
  --text-dim: #696969;
  --text-on-accent: #ffffff;
  --text-on-danger: #ffffff;

  /* Borders */
  --border: #3a3a3c;
  --border-strong: #4a4a4d;
  --border-hover: #626266;

  /* Teal accent and focus */
  --accent: #48897b;
  --accent-hover: #3c766a;
  --accent-text: #86c9ba;
  --accent-text-hover: #b3e2d7;
  --focus-ring: #74b5a6;
  --accent-bg: rgba(72, 137, 123, 0.2);
  --accent-bg-soft: rgba(72, 137, 123, 0.16);
  --accent-bg-faint: rgba(72, 137, 123, 0.15);
  --accent-glow: rgba(72, 137, 123, 0.22);
  --accent-glow-soft: rgba(116, 181, 166, 0.18);
  --accent-border: rgba(116, 181, 166, 0.55);

  /* Positive status */
  --positive: #7ed6c4;
  --positive-bg: rgba(126, 214, 196, 0.16);
  --positive-bg-soft: rgba(126, 214, 196, 0.12);
  --positive-bg-faint: rgba(126, 214, 196, 0.1);
  --positive-border: rgba(126, 214, 196, 0.5);
  --positive-glow: rgba(126, 214, 196, 0.12);

  /* Warning status */
  --warning: #e4b56f;
  --warning-bg: rgba(228, 181, 111, 0.16);
  --warning-bg-soft: rgba(228, 181, 111, 0.14);
  --warning-border: rgba(255, 212, 94, 0.68);
  --warning-bg-brand: rgba(255, 212, 94, 0.14);
  --warning-border-strong: rgba(181, 139, 79, 0.2);

  /* Danger status */
  --danger: #d37575;
  --danger-text: #f0baba;
  --danger-text-soft: #e7aaaa;
  --danger-text-strong: #f0aaaa;
  --danger-deep: #a65353;
  --danger-deep-hover: #8f4545;
  --danger-indicator: #e47676;
  --danger-bg: rgba(181, 82, 82, 0.14);
  --danger-bg-strong: rgba(174, 69, 69, 0.16);
  --danger-bg-hover: rgba(211, 117, 117, 0.18);
  --danger-bg-chip: rgba(174, 69, 69, 0.2);
  --danger-bg-subtle: rgba(174, 69, 69, 0.15);
  --danger-bg-indicator: rgba(228, 118, 118, 0.16);
  --danger-bg-indicator-soft: rgba(228, 118, 118, 0.14);
  --danger-border: rgba(211, 117, 117, 0.4);
  --danger-border-strong: rgba(218, 112, 112, 0.55);
  --danger-border-indicator: rgba(228, 118, 118, 0.45);
  --danger-border-subtle: rgba(174, 69, 69, 0.15);

  /* Informational status */
  --info: #6ea8fe;
  --info-hover: #9ec5fe;
  --info-bg: rgba(148, 185, 232, 0.14);
  --info-indicator: #94b9e8;

  /* Chips and labels */
  --chip-neutral-bg: rgba(163, 163, 166, 0.16);
  --chip-purple-bg: rgba(123, 123, 140, 0.2);
  --chip-purple-text: #c5c5d0;

  /* Overlays and shadows */
  --overlay: rgba(0, 0, 0, 0.72);
  --overlay-soft: rgba(0, 0, 0, 0.45);
  --shadow: rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.42);
  --shadow-strong: rgba(0, 0, 0, 0.45);

  font-family: "Space Grotesk", sans-serif;
  font-synthesis: none;
  font-weight: 400;
  color: var(--text);
  background-color: var(--app-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}