/* Loom default theme — mobile-first, responsive, light/dark aware. */
:root {
  --bg: #ffffff;
  --fg: #1f2430;
  --muted: #5b6472;
  --accent: #3355dd;
  --accent-fg: #ffffff;
  --border: #e4e7ec;
  --surface: #f7f8fa;
  --maxw: 62rem;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c; --fg: #e7eaf0; --muted: #9aa4b2; --accent: #6f8bff;
    --accent-fg: #0b0e13; --border: #262b33; --surface: #1b1f26;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.1rem; }

/* Header + nav */
.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.brand { font-weight: 700; font-size: 1.15rem; color: var(--fg); }
.brand:hover { text-decoration: none; }

.nav-toggle {
  margin-left: auto; display: inline-flex; flex-direction: column; gap: 5px;
  width: 42px; height: 42px; padding: 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); cursor: pointer;
}
.nav-toggle span { height: 2px; background: var(--fg); border-radius: 2px; }

.site-nav { display: none; width: 100%; }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.site-nav a { display: block; padding: .55rem .3rem; color: var(--fg); border-radius: 8px; }
.site-nav a:hover { background: var(--surface); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

@media (min-width: 720px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; width: auto; margin-left: auto; }
  .site-nav ul { flex-direction: row; gap: .4rem; }
}

/* Main + sections */
main.container { padding-top: 2rem; padding-bottom: 3rem; }
.hero { padding: 2.5rem 0 1.5rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin: 0 0 .4rem; line-height: 1.1; }
.lede { font-size: 1.2rem; color: var(--muted); margin: 0 0 1.2rem; }
.prose { max-width: 42rem; }
.prose h2 { margin-top: 2rem; }

/* Buttons */
.button {
  display: inline-block; padding: .6rem 1rem; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-fg); font-weight: 600; border: 0;
}
.button:hover { text-decoration: none; filter: brightness(1.05); }
.button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }

/* Flash messages */
.flash-stack { margin-bottom: 1.2rem; display: grid; gap: .5rem; }
.flash { padding: .7rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); }
.flash-success { border-color: #29a05244; background: #29a0521a; }
.flash-error   { border-color: #d43a3a44; background: #d43a3a1a; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 3rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; padding: 1.4rem 1.1rem; color: var(--muted); }
.footer-inner p { margin: 0; }