@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--surface-page);
  background-image:var(--scanline);
  font-family:var(--font-body);
  color:var(--text-body);
}
a{color:var(--dk-green-300);text-decoration:none;}
a:hover{color:var(--dk-green-400);}

/* site chrome */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 40px;
  border-bottom:1px solid var(--line-2);
}
.site-nav .brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--dk-white);
}
.site-nav .brand img{height:34px;}
.site-nav .brand span{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:17px;
  letter-spacing:-0.01em;
}
.site-nav .nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:var(--text-sm);
}
.site-nav .nav-links a{color:var(--text-body);}
.site-nav .nav-links a:hover{color:var(--dk-green-300);}
.site-nav .path{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--accent);
}

.site-footer{
  border-top:1px solid var(--line-2);
  padding:24px 40px;
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-faint);
}
.site-footer a{color:var(--text-faint);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--accent);
}

@media (max-width:600px){
  .site-nav,.site-footer{padding-left:var(--gutter);padding-right:var(--gutter);}
}