/**
 * Above-the-fold shell before Tailwind/React — loaded via <link> for CSP (no inline styles).
 *
 * Single source of truth for the very first paint. Values here MUST match:
 *   - public/theme-boot.js          (theme-color meta + html class)
 *   - index.html <meta name="theme-color">
 *   - styles/theme-mono-lux.css + theme-light.css (bundled in main.tsx; --theme-*)
 *   - src/marketing/landing.css     (--bg)
 *   - src/App.tsx isInitializing splash (bg color)
 *   - src/contexts/ThemeContext.tsx themeColorMap.dark
 *
 * If you change the boot color, update ALL of the above in lockstep or you
 * will reintroduce a multi-stage flash on hard reload.
 */
:root {
  /* Boot color = final auth/dashboard color = theme-mono-lux --theme-bg-primary.
     Harmonized on #121212 (was #060608) so the boot window and the React-mounted
     surface read identical CSS-var values; eliminates the layout-jump that came
     from `.theme-mono-lux` overriding `:root` after the bundled CSS arrived. */
  --theme-bg-primary: #121212;
  --theme-bg-secondary: #0f0f0f;
  --theme-bg-tertiary: #1a1a1a;
  --theme-bg-elevated: #252525;
  --theme-bg-glass: rgba(255, 255, 255, 0.03);
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #f0f0f0;
  --theme-text-muted: #999999;
  --theme-accent-primary: #ffffff;
  --theme-accent-gold: #c4a466;
  --theme-border: rgba(255, 255, 255, 0.08);
  --theme-border-strong: rgba(255, 255, 255, 0.15);
  --theme-border-glass: rgba(255, 255, 255, 0.1);
  --theme-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.95);
  --theme-glow: rgba(255, 255, 255, 0.1);
  --theme-gradient-page: linear-gradient(135deg, #121212 0%, #181818 25%, #1a1a1a 50%, #181818 75%, #121212 100%);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --text-base: 1rem;
  --leading-normal: 1.5;
  --space-0: 0;
  --space-4: 1rem;
  --space-3: 0.75rem;
  --space-6: 1.5rem;
  --radius-lg: 0.75rem;
}

.theme-light {
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8f9fa;
  --theme-text-primary: #0a0a0a;
  --theme-accent-primary: #262626;
}

/* Auth surface — minimal subset of `.theme-mono-lux .theme-page-bg` and
   `.theme-mono-lux .auth-form-column-border` from theme-mono-lux.css, inlined
   here so the auth page renders with its full surface (gradient bg + column
   hairline) on first paint while the JS module graph is still loading.
   theme-mono-lux.css's later rules layer cleanly over these. */
.theme-mono-lux .theme-page-bg {
  background: var(--theme-gradient-page);
}

@media (min-width: 1024px) {
  .theme-mono-lux .auth-form-column-border {
    border-left: 1px solid var(--theme-border);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

html,
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--theme-text-primary);
  background-color: var(--theme-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

#root {
  min-height: 100vh;
  min-height: 100dvh;
}

.skip-link {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}

.skip-link:focus {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-6);
  background: var(--theme-accent-primary);
  color: var(--theme-bg-primary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
}

/* ───────────────────────────────────────────────────────────────────────
   Pre-React boot splash
   ───────────────────────────────────────────────────────────────────────
   Rendered inside #root in index.html and removed on first React paint
   (main.tsx clears the root before ReactDOM.createRoot.render). This is
   what visitors see between TTFB and React mount — keeping it visually
   close to the final marketing/auth surface eliminates the white/grey
   flash that used to occur during bundle parse + auth init.

   Pure CSS, no JS, no images, no network — so it paints with the first
   stylesheet (critical.css) and survives offline reloads.
*/
.app-boot-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  /* Fade *out* the splash before React mounts so we never get a flash of
     "splash gone, content not yet". React removes the node after it renders. */
  animation: app-boot-splash-fade-in 240ms ease-out both;
  z-index: 1;
}

.app-boot-splash[hidden] {
  display: none !important;
}

.app-boot-splash__mark {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(240, 239, 232, 0.18) 0%,
    rgba(240, 239, 232, 0.04) 55%,
    rgba(0, 0, 0, 0.4) 100%
  );
  border: 1.5px solid rgba(240, 239, 232, 0.18);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.app-boot-splash__mark::before {
  /* Inner aperture — concentric ring evoking a camera lens iris. */
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 239, 232, 0.55);
  opacity: 0.85;
}

.app-boot-splash__mark::after {
  /* Subtle rotating sheen — paused for users who prefer reduced motion. */
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--theme-accent-gold, #c4a466);
  animation: app-boot-splash-spin 1.4s linear infinite;
}

.app-boot-splash__wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.6875rem; /* 11px */
  color: rgba(240, 239, 232, 0.6);
}

@keyframes app-boot-splash-spin {
  to { transform: rotate(360deg); }
}

@keyframes app-boot-splash-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .app-boot-splash { animation: none; }
  .app-boot-splash__mark::after { animation: none; opacity: 0.4; }
}

/* Light theme — keep the same component structure, swap only colors. */
.theme-light .app-boot-splash__mark {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.02) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
  border-color: rgba(0, 0, 0, 0.18);
}
.theme-light .app-boot-splash__mark::before { border-color: rgba(0, 0, 0, 0.45); }
.theme-light .app-boot-splash__wordmark    { color: rgba(10, 10, 10, 0.55); }

/* Load-fallback UI (injected by app-fallback.js if the SPA never mounts) */
.app-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  text-align: center;
  font-family: system-ui, sans-serif;
}

.app-fallback-msg {
  color: #e5e5e5;
  font-size: 1.125rem;
  margin-bottom: 16px;
}

.app-fallback-reload {
  padding: 12px 24px;
  background: #fff;
  color: #121212;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.app-fallback-hint {
  color: #737373;
  font-size: 0.875rem;
  margin-top: 24px;
}