/* Critical CSS - Above-the-fold styles for fast initial render */

/* Critical reset and base styles */
*{padding:0;margin:0;border:0;box-sizing:border-box}
html,body{height:100%;width:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.47;background-color:#fff;color:#1d1d1f}

/* Critical CSS variables - mirror of src/index.css :root (primitives + semantic layer) */
:root{
  --bg-header-color:rgba(251,251,253,0.8);
  --bg-page-color:#ffffff;
  --bg-main-color:#f5f5f7;
  --bg-section-alt:#fbfbfd;
  --text-primary-color:#1d1d1f;
  --text-secondary-color:#636366;
  --text-tertiary-color:#6e6e73;
  --text-white-color:#ffffff;
  --accent-color:#0071e3;
  --accent-hover:#0077ed;
  --primary-color:#ffd500;
  --primary-hover:#e6c000;
  --border-color:#d2d2d7;
  --max-width:980px;
  --space-sm:16px;
  --space-md:24px;
  --space-xl:64px;
  --transition-fast:0.2s ease;
  /* Semantic tokens */
  --surface-primary:var(--bg-page-color);
  --surface-secondary:var(--bg-main-color);
  --surface-elevated:var(--bg-page-color);
  --surface-alt:var(--bg-section-alt);
  --surface-glass:var(--bg-header-color);
  --text-primary:var(--text-primary-color);
  --text-secondary:var(--text-secondary-color);
  --text-muted:var(--text-tertiary-color);
  --text-on-accent:var(--text-white-color);
  --interactive-accent:var(--accent-color);
  --interactive-accent-hover:var(--accent-hover);
  --interactive-primary:var(--primary-color);
  --interactive-primary-hover:var(--primary-hover);
  --border-subtle:rgba(0,0,0,0.08);
  --border-default:var(--border-color);
}

/* Dark theme (mirror of src/index.css — keep in sync) */
:root[data-theme="dark"]{
    color-scheme: dark;
    --bg-header-color: rgba(22, 22, 24, 0.72);
    --bg-page-color: #0a0a0c;
    --bg-main-color: #161618;
    --bg-section-alt: #1c1c1e;
    --text-primary-color: #f5f5f7;
    --text-secondary-color: #a1a1a6;
    --text-tertiary-color: #8e8e93;
    --border-color: #38383a;
    --border-subtle: rgba(255, 255, 255, 0.10);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --scroll-btn: rgba(72, 72, 74, 0.8);
    --scroll-btn-active: rgba(99, 99, 102, 0.9);
    --untoggle-bg-color: #39393d;
    --switch-bg-color: #f5f5f7;
    --modal-overlay-bg-color: rgba(0, 0, 0, 0.7);
    /* Bespoke semantic surfaces (beyond primitive auto-flip) */
    --surface-elevated: #1f1f21;
    --surface-glass: rgba(22, 22, 24, 0.72);
}
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
        color-scheme: dark;
        --bg-header-color: rgba(22, 22, 24, 0.72);
        --bg-page-color: #0a0a0c;
        --bg-main-color: #161618;
        --bg-section-alt: #1c1c1e;
        --text-primary-color: #f5f5f7;
        --text-secondary-color: #a1a1a6;
        --text-tertiary-color: #8e8e93;
        --border-color: #38383a;
        --border-subtle: rgba(255, 255, 255, 0.10);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
        --scroll-btn: rgba(72, 72, 74, 0.8);
        --scroll-btn-active: rgba(99, 99, 102, 0.9);
        --untoggle-bg-color: #39393d;
        --switch-bg-color: #f5f5f7;
        --modal-overlay-bg-color: rgba(0, 0, 0, 0.7);
        /* Bespoke semantic surfaces (beyond primitive auto-flip) */
        --surface-elevated: #1f1f21;
        --surface-glass: rgba(22, 22, 24, 0.72);
    }
}

/* Header critical styles — scoped to stable global hooks (never hashed module classes) */
.site-header{position:sticky;top:0;background:var(--surface-glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:100;border-bottom:1px solid var(--border-subtle)}
.site-header-content{display:flex;align-items:center;justify-content:space-between;margin:0 auto;max-width:var(--max-width);padding:0 22px;height:44px}

/* Intro/Hero critical styles — scoped to stable global hooks (never hashed module classes) */
.intro-hero{background-color:var(--bg-main-color);overflow:hidden;min-height:72vh;display:flex;align-items:center;justify-content:center;padding:var(--space-xl) var(--space-md)}
.intro-hero-content{margin:0 auto;max-width:1200px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}

/* Spinner for loading state */
.app-spinner{display:flex;align-items:center;justify-content:center;height:100vh}

/* Reduced motion preference */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}