/* Base styles for our extension */
:root {
  --example-primary-color: #3498db;
  --example-secondary-color: #2c3e50;
  --example-text-color: #ecf0f1;
  --example-accent-color: #e74c3c;
  --example-bg-color: #34495e;
  --example-border-color: #7f8c8d;
  --example-muted-text-color: #95a5a6;
}

/* Light mode overrides */
:root.comfy-theme-light #comfyui-react-example-root {
  --example-primary-color: #2980b9;
  --example-secondary-color: #34495e;
  --example-text-color: #2c3e50;
  --example-accent-color: #c0392b;
  --example-bg-color: #ecf0f1;
  --example-border-color: #bdc3c7;
  --example-muted-text-color: #7f8c8d;
}

/* Make sure our styles don't leak out to the rest of ComfyUI */
#comfyui-react-example-root {
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
  color: var(--example-text-color);
}

#comfyui-react-example-root * {
  box-sizing: border-box;
}