import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

// Template foundation (source of truth - same as research-article-template)
import "./styles/_variables.css";
import "./styles/_reset.css";
import "./styles/_base.css";
import "./styles/_layout.css";
import "./styles/_print.css";
import "./styles/components/_code.css";
import "./styles/components/_table.css";
import "./styles/components/_tag.css";
import "./styles/components/_card.css";
import "./styles/components/_mermaid.css";
import "./styles/components/_embed.css";
import "./styles/components/_embed-studio.css";
import "./styles/components/_hf-user.css";
import "./styles/components/_connected-users.css";
import "./styles/components/_hero.css";
import "./styles/components/_toc.css";
import "./styles/components/_button.css";
import "./styles/components/_form.css";
import "./styles/components/_footer.css";

// Editor chrome UI
import "./styles/_ui.css";

// Design tokens (light/dark theming for editor + article)
import "./styles/tokens.css";
import "./styles/article.css";
import "./styles/toc.css";

// Editor-only styles (split by concern - loaded after shared styles)
import "./styles/editor/_layout.css";
import "./styles/editor/_chrome.css";
import "./styles/editor/_block-tools.css";
import "./styles/editor/_panels.css";
import "./styles/editor/_hero-editable.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);