<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ dashboard_name }}</title>
    <style>
      /*
       * Minimal subset of Hub design tokens (apps/dashboard/src/styles/tokens.css).
       * Gives the dev harness working tokens identical to Hub without requiring
       * Hub to be running. In production, Hub's tokens.css takes precedence.
       */
      :root {
        /* Colors — Dark (default) */
        --color-bg-primary: #000000;
        --color-bg-secondary: #070707;
        --color-bg-tertiary: #0B0B0C;
        --color-bg-elevated: #111113;
        --color-text-primary: #FFFFFF;
        --color-text-secondary: #E9E9E9;
        --color-text-muted: #6B6B76;
        --color-text-inverse: #0A0A0A;
        --color-border: #1A1A1F;
        --color-border-focus: #155DFC;
        --color-accent: #155DFC;
        --color-accent-hover: #2E6FFF;
        --color-accent-light: #0A1628;
        --color-success: #10b981;
        --color-warning: #f59e0b;
        --color-error: #ef4444;
        --color-error-hover: #dc2626;

        /* Fonts */
        --font-sans: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --font-mono: "JetBrains Mono", "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Monaco, monospace;

        /* Spacing */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;

        /* Radius */
        --radius-sm: 0.25rem;
        --radius-md: 0.375rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;

        /* Transitions */
        --transition-fast: 150ms ease;
        --transition-normal: 200ms ease;

        /* Layout */
        --header-height: 4rem;
      }

      [data-theme="light"] {
        --color-bg-primary: #FAFAFA;
        --color-bg-secondary: #FFFFFF;
        --color-bg-tertiary: #F5F5F5;
        --color-bg-elevated: #FFFFFF;
        --color-text-primary: #0A0A0A;
        --color-text-secondary: #525252;
        --color-text-muted: #737373;
        --color-text-inverse: #FFFFFF;
        --color-border: #E5E5E5;
        --color-border-focus: #155DFC;
        --color-accent: #155DFC;
        --color-accent-hover: #1249CC;
        --color-accent-light: #EBF2FF;
        --color-success: #10b981;
        --color-warning: #f59e0b;
        --color-error: #ef4444;
        --color-error-hover: #dc2626;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/dev.tsx"></script>
  </body>
</html>
