<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />

    <title>SynkTribe</title>
    <meta name="description" content="SynkTribe — next-gen XR platform." />

    <!-- Color scheme + PWA niceties -->
    <meta name="color-scheme" content="dark light" />
    <meta name="theme-color" content="#0b0e14" media="(prefers-color-scheme: dark)" />
    <!-- Aurora Mist for light mode -->
    <meta name="theme-color" content="#EEF2F7" media="(prefers-color-scheme: light)" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="manifest" href="/manifest.webmanifest" />

    <!-- Minimal reset + global surfaces -->
    <style>
      :root {
        /* Dark palette stays the same */
        --bg-dark:#0b0e14;  --fg-dark:#e6edf3;

        /* Aurora Mist (cool, very light) */
        --bg-light:#EEF2F7; --fg-light:#0b0e14;

        /* App surface variables many components read (override greys) */
        /* Use HSL tokens so anything doing hsl(var(--app-bg)) picks these up */
        --app-bg: 220 20% 95%;    /* ≈ #EEF2F7 base surface */
        --app-elev: 220 20% 98%;  /* slightly lighter for elevated cards */

        /* Glass tints used by overlays/cards (subtle) */
        --glass-bg: 220 22% 10% / 0.06;
        --glass-strong: 220 22% 10% / 0.12;

        /* Optional text/muted hues tuned for Aurora */
        --text: 220 22% 8%;
        --muted: 220 10% 36%;
      }

      html, body, #root { height: 100%; min-height: 100%; }

      body {
        margin: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background: var(--bg-dark);
        color: var(--fg-dark);
      }

      @media (prefers-color-scheme: light) {
        body {
          /* Base Aurora Mist tone */
          background-color: var(--bg-light);
          color: var(--fg-light);

          /* Subtle brand aurora from top corners */
          background-image:
            radial-gradient(120% 60% at 10% -10%, rgba(99,102,241,0.06), transparent 60%),
            radial-gradient(120% 60% at 90% -10%, rgba(16,185,129,0.05), transparent 60%);
          background-repeat: no-repeat;
          background-attachment: fixed;
        }
      }

      /* Ensure the root is never hidden during triage */
      #root { display: block !important; opacity: 1 !important; visibility: visible !important; }

      /* Safe font stack before app CSS loads */
      .preboot-font {
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
                     "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      }

      /* === Aurora Mist surface overrides + wrapper transparency (light mode) === */
      @media (prefers-color-scheme: light) {
        /* 1) Map popular design tokens to Aurora Mist */
        :root,
        :root.light,
        [data-theme="light"] {
          /* shadcn / Tailwind token names */
          --background: 220 20% 95%;   /* ≈ #EEF2F7 base surface */
          --foreground: 220 22% 8%;
          --card:       220 20% 98%;
          --card-foreground: 220 22% 8%;
          --popover:    220 20% 98%;
          --popover-foreground: 220 22% 8%;
          --muted:      220 10% 90%;
          --muted-foreground: 220 14% 32%;
          --border:     220 12% 80%;
          --input:      220 12% 80%;
          --ring:       220 90% 60%;

          /* your app tokens (from earlier traces) */
          --app-bg:   220 20% 95%;
          --app-elev: 220 20% 98%;
          --glass-bg:    220 22% 10% / 0.06;
          --glass-strong:220 22% 10% / 0.12;
          --text:  220 22% 8%;
          --muted: 220 10% 36%;
        }

        /* 2) Let the body’s Aurora Mist show through common wrappers */
        #root,
        #root > div,
        #root > div > div,
        .App, .app, .app-root,
        .shell, .frame, .layout, .container, main {
          background: transparent !important;
          background-color: transparent !important;
        }

        /* 3) If your utilities use the bg tokens, keep them in sync */
        .bg-background { background-color: hsl(var(--background)) !important; }
        .bg-card       { background-color: hsl(var(--card)) !important; }
        .border-border { border-color:     hsl(var(--border)) !important; }
      }
    </style>
  </head>

  <body class="preboot-font">
    <noscript>
      <div style="padding:12px;background:#330; color:#ffd; font:13px/1.4 ui-monospace,Menlo,Consolas,monospace">
        SynkTribe requires JavaScript to run.
      </div>
    </noscript>

    <div id="root"></div>

    <!-- Vite entry -->
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
