/* Chrome and tokens copied from sepehrelahi.com (assets/css/main.css), so blog pages sit in the site. */
:root {
  --global-bg-color: #faf9ff;
  --global-code-bg-color: rgba(79, 70, 229, 0.05);
  --global-text-color: #1e1b2e;
  --global-text-color-light: #6b7280;
  --global-theme-color: #4F46E5;
  --global-hover-color: #6366F1;
  --global-divider-color: rgba(0, 0, 0, 0.1);
  --global-card-bg-color: #ffffff;
  --site-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --site-column: 800px;
  color-scheme: light;
}
html[data-theme="dark"] {
  --global-bg-color: #161329;
  --global-code-bg-color: #1f1c33;
  --global-text-color: #e5e4eb;
  --global-text-color-light: #9ca0af;
  --global-theme-color: #A5B4FC;
  --global-hover-color: #A5B4FC;
  --global-divider-color: #302c4a;
  --global-card-bg-color: #1f1c33;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--global-bg-color); }
body {
  margin: 0; padding-top: 57px;
  font: 400 1rem/1.6 var(--site-font); color: var(--global-text-color); background: var(--global-bg-color);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: var(--global-theme-color); text-decoration: none; }
a:hover { color: var(--global-hover-color); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--global-theme-color); outline-offset: 2px; }
html.transition, html.transition * { transition: background-color .4s, color .4s, border-color .4s !important; }

.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: 57px;
  background: var(--global-bg-color); border-bottom: 1px solid var(--global-divider-color);
}
.site-nav .inner { max-width: var(--site-column); margin: 0 auto; height: 100%; padding: 0 15px; display: flex; align-items: center; }
.site-brand { font-size: 1.25rem; font-weight: 300; color: var(--global-text-color); }
.site-brand b { font-weight: 700; }
.site-brand:hover { color: var(--global-theme-color); text-decoration: none; }
.site-nav .crumb { margin-left: .75rem; font-size: .95rem; color: var(--global-text-color-light); }
.theme-toggle {
  margin-left: auto; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border: 0; background: none; color: var(--global-text-color); cursor: pointer; border-radius: 6px;
}
.theme-toggle:hover { color: var(--global-theme-color); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }

.site-footer { margin-top: 5rem; padding: 1.5rem 15px 2rem; border-top: 1px solid var(--global-divider-color); color: var(--global-text-color-light); font-size: .875rem; }
.site-footer .inner { max-width: var(--site-column); margin: 0 auto; }